I know this has a simple solution. Maybe because it is late but I have hit a wall. I have a container div #jewelsContainer with a list of child divs inside. I am grabbing it in an object like this:

var existingBoardItems = $('#jewelsContainer').html();

this object produces a list of all the divs inside the #jewelsContainer container div

i.e. BEFORE

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
<div class="aff_score" style="left:0px; top:0px;">+10</div>
...

AFTER

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
...

I need to loop through all the divs in this object and remove any div that does NOT have a class .jewel then set a localStorage for the newly created object

localStorage.setItem('existingBoardItems',NEWELY CREATED OBJECT);

I know this has a simple solution. Maybe because it is late but I have hit a wall. I have a container div #jewelsContainer with a list of child divs inside. I am grabbing it in an object like this:

var existingBoardItems = $('#jewelsContainer').html();

this object produces a list of all the divs inside the #jewelsContainer container div

i.e. BEFORE

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
<div class="aff_score" style="left:0px; top:0px;">+10</div>
...

AFTER

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
...

I need to loop through all the divs in this object and remove any div that does NOT have a class .jewel then set a localStorage for the newly created object

localStorage.setItem('existingBoardItems',NEWELY CREATED OBJECT);

• javascript
• jquery
• html

Share Improve this question Follow edited May 2, 2016 at 18:11 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jul 4, 2014 at 4:33 JasonJason 1,16155 gold badges2020 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Try to use :not() selector at this context, and there is no need to iterate all the divs.

$('#jewelsContainer div:not(.jewel)').remove();

DEMO

Although an answer has been accepted, I feel the non-jQuery solution should be present as well. :not is not a jQuery selector, it's a CSS selector that is supported in both jQuery and in the native querySelector and querySelectorAll.

Removing said elements could be something like this:

[].forEach.call(document.querySelectorAll('#container :not(.a)'), function(e,i){
    e.parentNode.removeChild(e);
})

or this:

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

fiddle

And here is a jsperf that shows that vanilla is more than twice as fast in this case. Edit: seems it's only faster on chrome.

Try this method

$('#jewelsContainer').find('div').each(function () {
   if (!$(this).hasClass('jewel')) {
        $(this).remove()
    }
});
localStorage.setItem('existingBoardItems',$('#jewelsContainer').html());
console.log(localStorage.getItem('existingBoardItems'));

DEMO