循环遍历容器并删除没有特定类的 div

Question

我知道这有一个简单的解决方案。也许是因为太晚了，但我碰壁了。我有一个容器div #jewelsContainer，里面有一个子 div 列表。我在这样的对象中抓取它：

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

此对象生成#jewelsContainer 容器 div 内所有 div 的列表

即之前

<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>
...

之后

<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 并删除任何没有类 .jewel 的 div 然后为新创建的对象设置一个 localStorage

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

Answer 1

尝试在这个上下文中使用:not()选择器，不需要遍历所有的div。

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

DEMO

Answer 2

虽然答案已被接受，但我觉得非 jQuery 解决方案也应该存在。 :not 不是 jQuery 选择器，它是一个 CSS 选择器，在 jQuery 和本机 querySelector 和 querySelectorAll 中都受支持。

删除上述元素可能是这样的：

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

或者这个：

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

fiddle

这里有一个jsperf，它表明在这种情况下，香草的速度是原来的两倍多。编辑：似乎它只在 chrome 上更快。

Answer 3

试试这个方法

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

DEMO