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

forEach的纯JavaScript解决方案：

var div = document.querySelectorAll('.container_one');
div.forEach(function(el){
  var target = el.querySelector('.status');
  if(target.textContent == 'Ended'){
    el.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 2

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

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

首先('.status:contains("Ended")')将选择所有具有类status的元素，包含文本“已结束”并且是main_container的子元素（不需要但建议加快元素的选择）在复杂的页面上）。

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

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

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

Working JSFiddle Demo

Answer 3

试试这个

$filstatus.parent().parent().remove();

Answer 4

filter将返回一个数组，然后使用each循环该数组并删除该元素。在这种情况下，它将删除该特定div，但父div仍将在dom

var $filstatus = $('.status').filter(function() {
  return $(this).text().trim() === 'Ended';
});
$filstatus.each(function(index, elem) {
  $(elem).remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 5

如果您要删除其内在孩子的文字为.container_one的{{1}}，请尝试

Ended

Answer 6

由于您要删除类.container_one的最近的ansistor，您需要使用closest

$filstatus.closest(".container_one").remove();

请检查：https://jsfiddle.net/n3d5fwqj/1/

https://api.jquery.com/closest/

Answer 7

我发现您的问题是您可以删除子div status，但您想要的是删除整个父div container_one

您可以使用$.each并使用closest(class_name)删除包含其子级的父级

  $.each($('.status'), function(idx, div) {
      if ($(this).text() == 'Ended') {
        $(this).closest('.container_one').remove();
      }
  });

Demo

或者您可以继续使用过滤器，只需将.closest('.container_one')添加到您的jquery选择器

即可

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

  $filstatus.closest('.container_one').remove();

Demo

Answer 8

如果您在其他地方不需要$ filstatus，请尝试使用此

$('.status').each(function(){
  if ($(this).text() == "Ended"){
    $(this).parent().parent().remove();
  }
})

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

8 个答案: