CODEWITHSUNDEEP
javascriptjquery
natsumiyu
natsumiyu

Reputation: 3257

How to check if inner <div> has text

what I'm trying to do is to check if my inner <div> has a text for example Ended and then remove if it has a text. I have multiple <div> with the same class name. I tried using .filter(). I would like to remove the div container_one that contains the found element.

Here is my 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>

Thank you for the help!

Upvotes: 0

Views: 573

Answers (8)

venimus
venimus

Reputation: 6047

I would use the jQuery's selector by content combined with .closest(). This might be the shortest way:

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

First ('.status:contains("Ended")') will select all elements that have a class status, contain the text "Ended" and are children of main_container (not needed but is recommended to speed up selection of elements on complex pages).

Then the method .closest('container_one') will climb up the parents tree for each of the elements from the previous step and select the first parent element with class 'container_one'.

At last it will remove all elements found.

Note: all those methods work both with single element and collections of elements, so no need of any for/foreach.

Working JSFiddle Demo

Upvotes: 1

Beginner
Beginner

Reputation: 4153

I see your problem is you are able to remove the child div status but what you want is to remove the entire parent div with class container_one

you can use $.each for that and use closest(class_name) to remove the parent including its child

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

Demo

or you can continue your filter and just add .closest('.container_one') to your jquery selector

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

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

Demo

Upvotes: 0

Thu San
Thu San

Reputation: 1544

Try using this if you don't need $filstatus in other places

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

Upvotes: 0

Mamun
Mamun

Reputation: 68933

Pure JavaScript solution with forEach:

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>

Upvotes: 1

Neville Nazerane
Neville Nazerane

Reputation: 7019

Since you want to remove the closest ansistor with class .container_one, you will need to use closest

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

Check this: https://jsfiddle.net/n3d5fwqj/1/

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

Upvotes: 0

alizahid
alizahid

Reputation: 969

If you want to remove .container_one whose inner child has the text Ended, try

const ended = $('.status').filter((index, element) => $(element).text() === 'Ended')

ended.parents('.container_one').remove()

Upvotes: 0

brk
brk

Reputation: 50291

filter will return an array , then use each to loop over that and delete the element. In this case it will remove that specific div but the parent div will still be in 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>

Upvotes: 0

Venka Tesh user5397700
Venka Tesh user5397700

Reputation: 359

Try this

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

Upvotes: 0

Related Questions