删除jquery中的下一个元素和选定的元素

Question

我将批量删除id以leg-开头的所有div元素

$('div[id^="leg-"]').remove();

我还想删除每个div后面的<hr>元素：

<div id="leg-1">
    ...
</div>

<hr>

没有触发事件，这就是为什么我不能像这样选择元素：

$(this).next();

我该怎么做呢？

Answer 1

您可以将jQuery所做的选择缓存在一个中间变量中，如下所示：

var selection = $('div[id^="leg-"]');
selection.next().remove();
selection.remove();

与您想要使用的$(this)方法一样，变量selection现在包含对您想要删除的所有div的引用。对该选择调用next()将返回每个hr的直接同级，也就是您要删除的div。

总而言之:当您需要在jQuery中两次使用相同的选择时，请考虑将其保存到一个变量中，以加快脚本速度，并将DOM查询次数减少到最少。

Answer 2

您可以使用.next()选择div的下一个hr，然后使用.addBack()将div添加到jquery选择器中。

​

$("div[id^=leg-]").next().addBack().remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">leg-1 text</div>
<hr>
<div>text</div>
<div id="leg-2">leg-2 text</div>
<hr>
<div>text2</div>

​

Answer 3

首先尝试移除下一个<hr>元素移除选择元素

​

$(document).ready(function(){
  var selection = $('div[id^="leg-"]');
  selection.next('hr').remove();
  selection.remove();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">
  1
</div>
<hr>
<div id="leg-2">
  2
</div>
<hr>
<div id="">
  3 not leg
</div>
<hr>

​