javascript - 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>

标签： javascriptjquery

Answer 1

移动<section>标签后，选择并删除任何不是 a 的内容<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
});