JavaScript - how to delete elements that do not have a specific class?

Question

I want to delete all elements that do not have the class 'stay'
For example:

<div class="stay">Stay</div> 
<div class="stay">Stay</div> 
<div class="go">Go</div> 
<div class="element">Stay</div> 
<div class="Sel">classy</div>

I would like some javascript that would delete the elements that do not have the class stay and Sel, without having to list the classes go and element
I have used:

var els = document.querySelectorAll('#parent :not(.stay)');
for (var i = 0; i < els.length; i++) {
els[i].parentNode.removeChild(els[i])
}

from the first answer, but am unsure of how to keep the class 'Sel'.

Also, I DO NOT want any Jquery.

This question and its answer might help you: http://stackoverflow.com/questions/21975881/how-to-select-element-that-does-not-have-specific-class — Stuart Wagner, Apr 25 '15 at 06:27
just show what code you tried, and facing errors, so we will help. — Shahzad Barkati, Apr 25 '15 at 06:27

score 1 · Accepted Answer · answered Apr 25 '15 at 06:29

When you are doing such an operation should need to target a particular parent element, else it could also remove elements like html/body etc.

So assuming you have a parent node, you can use querySelectorAll in conjunction with :not() selector

<div id="parent">
    <div class="stay">Stay</div>
    <div class="stay">Stay</div>
    <div class="go">Go</div>
    <div class="element">element</div>
</div>

then

var els = document.querySelectorAll('#parent :not(.stay)');
for (var i = 0; i < els.length; i++) {
    els[i].parentNode.removeChild(els[i])
}

Demo: Fiddle

JavaScript - how to delete elements that do not have a specific class?

1 Answers1