javascript - 如何检查内部 <div> 是否有文本

Question

我想做的是检查我的内心是否<div>有一个文本，例如 Ended，然后删除(如果有文本)。我有多个<div>与相同的class姓名。我尝试使用 .filter() 。我想删除 div container_one包含找到的元素。

这是我的 HTML:

var $filstatus = $('.status').filter(function() {
  return $(this).text() == 'Ended';
});

$filstatus.remove();

<div class="main_container">

  <div class="container_one">
    <div class="inner_container">
      <div class="status">Ended</div>
    </div>
  </div>

  <div class="container_one">
    <div class="inner_container">
      <div class="status">On going</div>
    </div>
  </div>

  <div class="container_one">
    <div class="inner_container">
      <div class="status">Ended</div>
    </div>
  </div>

</div>

感谢您的帮助!

Answer 1

我会使用 jQuery 的 selector by content 与 .closest() 结合。这可能是最短的方法:

$('.status:contains("Ended")', $('.main_container')).closest('.container_one').remove();

第一个 ('.status:contains("Ended")') 将选择所有具有类 status、包含文本“Ended”并且是子元素的元素main_container(不需要，但建议加快复杂页面上元素的选择)。

然后方法 .closest('container_one') 将爬上上一步中每个元素的父级树，并选择类为“container_one”的第一个父元素。

最后它将删除找到的所有元素。

注意:所有这些方法都适用于单个元素和元素集合，因此不需要任何 for/foreach。

Working JSFiddle Demo