jquery - 如何在不影响 DOM 的情况下从父元素中删除子元素

Question

我有如下的 div 结构，

<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

<div class="child">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>

</div>

我已经选择了父母var ele = $(".parent");

如何在不影响 DOM 的情况下从“ele”变量中删除“.child”div，这样

我可以查询$(".div1", ele)，不会返回两个 .div1

笔记：

以上是一个简单的示例，但在我的项目中，我有非常大量的 div，比如 div1

所以我想做如下操作，

var ele = $(".parent");
ele.each(function(){
         var g = $(this);
      var val1 = $(".div1", g);
      var val1 = $(".div2", g);
      var val1 = $(".div3", g);
      var val1 = $(".div4", g);
});

请给我最短的解决方案。

Answer 1

如果您将选择器更改为，ele.children('.div1')您只会得到第.div1一个直接后代的.parent

但是，由于您实际要求的是如何在不更改 dom 的情况下从选择器中删除元素，所以答案是.not()

Answer 2

你不能那样做......你需要微调你的选择器

$(".div1:not(.child .div1)", ele)

演示：小提琴

或者

ele.children('.div1')

演示：小提琴