jquery - 删除列表中项目后的元素，jQuery - 第 2 部分

Question

我有一个这样的代码块：

<span class="main_container">
    <span id=".." class=".." position="1"...> </span>
    <span id=".." class=".." position="2"...> </span>  
    <span id=".." class=".." position="3"...> </span>
    <span id=".." class=".." position="4"...><img class="remove_it" scr="images/remove.png" /> </span>
    <span id=".." class=".." position="5"...> </span>
    <span id=".." class=".." position="6"...> </span>
</span>

基本上我希望一旦remove_it单击图像，span删除包含它的元素（图像）以及它span elements下面的所有其他元素。在这种情况下，4,5 和 6 处的元素。

谢谢

Answer 1

我建议：

$('.remove_it').click(function(){
    $(this).parent().nextAll('span').add(this.parentNode).remove();
})

JS 小提琴演示。

另外，作为附录，如果您使用自定义属性，您还可以在它们前面加上data-, ，以便至少它们在 HTML5 文档类型中有效。

将答案编辑为正确的this答案this.parentNode。

Answer 2

您可以通过使用该.nextAll()功能来实现这一点。

HTML

<p id="1">1</p>
<p id="2">2</p>
<p id="3">3</p>
<p id="4">4</p>
<p id="5">5</p>
<p id="6">
    6
    <span id="click">Click</span>
</p>
<p id="7">7</p>
<p id="8">8</p>

JavaScript

$("#click").on("click", function() {
    var $parent = $(this).parent();
    $parent.nextAll().remove();
    $parent.remove();
});

JSF中。

Answer 3

使用 parent()、nextAll()、addBack() ...

试试这个

$('.remove_it').click(function(e){
   $(this).parent().nextAll('span').addBack().remove();
});