Remove parent if it doesn't have a child with specific class

Question

I have a code like this:

How do I remove .parent.two because it doesn't have any child with .yes? What I've tried so far and it didn't work:

$('.parent div:not(.yes)').remove();

user_7867822 · Answer

You can use :not with :has:

$(() => $('.parent:not(:has(.yes))').remove())

.parent{ background: orange; height: 100px; width: 100px; margin: 10px; }



  Child of one
  Child of one
  Child of one



  Child of two
  Child of two
  Child of two



  Child of three
  Child of three
  Child of three

user_4620771 · Answer

You could create a selector as a combination of :not and :has and then use remove method. So this will select all elements with .parent class that do not have child element with .yes class.

$('.parent:not(:has(.yes))')

$('.parent:not(:has(.yes))').remove()



  one
  
  



  two
  
  



  three

user_7849549 · Answer

this is how you can do with vanilla js

document.querySelectorAll(".parent").forEach(ele => {
  if (ele.querySelector(".yes") == null) {
    ele.remove();
  }
})

//for checking
document.querySelectorAll(".parent").forEach(ele => {
  console.log(ele)
})

user_14046126 · Answer

You can achieve that in many ways. The basic approaches are :

Directly selecting :

$('.parent.two').remove();

Selecting on the basis of it's index :

$('.parent:eq(1)').remove();

On the basis of presence of .yes element as child :

$('.parent div').not('.parent .yes').parent().remove();

user_695364 · Answer

Check the .innerHTML of each parent div to see if a child with that text exists and remove the parent if not.

document.querySelectorAll("div.parent").forEach(function(parentDiv){
  if(!parentDiv.innerHTML.includes('')){
    parentDiv.remove();
  }
});

Remove parent if it doesn't have a child with specific class

5 Answers