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 Fiddle demo

此外，作为附录，如果您使用自定义属性，也可以使用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();
});

JSFiddle

Answer 3

使用parent（），nextAll()，addBack() ...

试试这个

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

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

3 个答案: