jQuery将子元素的子节元素移动到其父元素并移除其他元素

Question

我有一个parent-container，它有标题，其他的div，主要是<section>。

我想要将<section>单独移动到每个容器中的父级。

我的代码按预期运行，但我需要删除所有其他动态出现的元素，例如: table、p、b等。我不确定，这是不是正确的方法。:(

最终的代码格式如下：

<div class="parent-container">
   <section>Original content 1</section>
</div>
<div class="parent-container">
   <section>Original content 2</section>
</div>
<div class="parent-container">
   <section>Original content 3</section>
</div>

jsFiddle

​

$('.parent-container').each(function () {
 jQuery(this).find('section').appendTo($(this));
 jQuery(this).find('div').remove();
 jQuery(this).find('h1').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="parent-container">
 <div class="pc-1">
  <h1>Hello world</h1>
  <div class="pc-2">
   <section>Original content 1</section>
   <p>Some more content</p>
  </div>
 </div>
</div>

<div class="parent-container">
 <div class="pc-1">
  <h1>Hello world</h1>
  <div class="pc-2">
   <section>Original content 2</section>
   <p>Some more content</p>
  </div>
 </div>
</div>

<div class="parent-container">
 <div class="pc-1">
  <h1>Hello world</h1>
  <div class="pc-2">
   <section>Original content 3</section>
   <p>Some more content</p>
  </div>
 </div>
</div>

​

Answer 1

移动<section>标记后，选择并删除任何不是<section>的内容

$('.parent-container').each(function () {
 jQuery(this).find('section').appendTo($(this)); // Move sections to parent
 jQuery(this).find(':not(section)').remove(); // Delete anything that is not a section
});

Answer 2

您可以克隆您的clone元素，然后从父div中删除所有子元素，然后将您的克隆元素附加到父元素。

演示代码：

$('.parent-container').each(function() {
  var clone_your_secction = jQuery(this).find('section').clone() //clone section
  jQuery(this).children().remove() //remove all childrens
  jQuery(clone_your_secction).appendTo($(this)); //append same
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="parent-container">
  <div class="pc-1">
    <h1>Hello world</h1>
    <div class="pc-2">
      <section>Original content 1</section>
      <p>Some more content</p>
    </div>
  </div>
</div>

<div class="parent-container">
  <div class="pc-1">
    <h1>Hello world</h1>
    <div class="pc-2">
      <section>Original content 2</section>
      <p>Some more content</p>
    </div>
  </div>
</div>

<div class="parent-container">
  <div class="pc-1">
    <h1>Hello world</h1>
    <div class="pc-2">
      <section>Original content 3</section>
      <p>Some more content</p>
    </div>
  </div>
</div>

​