Question

尝试遍历某些元素并删除其父div持有者（如果发现它是空的）。我使用以下jquery代码，由于某种原因，它只删除第一个匹配的元素，之后没有。

$('.sylsection p').each( function() {
  if ( $(this).text() == '' ) {
  $(this).closest('.sylsection').remove();
  }
});

关于为什么会发生这种情况的任何想法？

HTML结构类似于：

<div class="sylsection">
  <h6>Content</h6>
  <hr>
  <p>Content</p>
</div>

<div class="sylsection">
  <h6></h6>
  <hr>
  <p></p>
</div>

<div class="sylsection">
  <h6>Content</h6>
  <hr>
  <p>Content</p>
</div>

<div class="sylsection">
  <h6></h6>
  <hr>
  <p></p>
</div>

<div class="sylsection">
  <h6>Content</h6>
  <hr>
  <p>Content</p>
</div>

<div class="sylsection">
  <h6></h6>
  <hr>
  <p></p>
</div>

不要介意html标记。稍后会将其移到外部css文件中。

干杯

Answer 1

工作正常：

  $('.sylsection p').each(function () {
      if ($(this).text() == '') {
          $(this).closest('.sylsection').remove();
      }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sylsection">
    <h6>Content 01</h6>
    <hr>
    <p>Content 02</p>
</div>

<div class="sylsection">
    <h6>Header 01</h6>
    <hr>
    <p></p>
</div>

<div class="sylsection">
    <h6>Content 03</h6>
    <hr>
    <p>Content 04</p>
</div>

<div class="sylsection">
    <h6>Header 02</h6>
    <hr>
    <p></p>
</div>

<div class="sylsection">
    <h6>Content 05</h6>
    <hr>
    <p>Content 06</p>
</div>

<div class="sylsection">
    <h6>Header 03</h6>
    <hr>
    <p></p>
</div>

Answer 2

我尝试使用jQuery 1.12.4（https://code.jquery.com/jquery-1.12.4.min.js）执行代码，它似乎工作正常，请参阅此jsfiddle：https://jsfiddle.net/0Lbp8xL1/3/

函数和html是一样的：

$('.sylsection p').each( function() {
    if ( $(this).text() == '' ) {
        $(this).closest('.sylsection').remove();
  }
});

jQuery each（）只触及第一个元素

2 个答案: