刪除元素，jQuery的 - 第2部分

我有一個代碼塊是這樣的：刪除元素，jQuery的 - 第2部分

<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

感謝

來源

2013-04-24 JanvierDesigns

您可以通過使用.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。

來源

2013-04-24 07:01:58 MarcoK

謝謝MarcoK。這的確有訣竅。反應快！ – JanvierDesigns 2013-04-24 07:08:49

我建議：

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

JS Fiddle demo。另外，作爲附錄，如果您使用的是自定義屬性，您也可以使用data-作爲前綴，這樣至少可以在HTML5文檔類型中生效。

編輯答案將this更正爲this.parentNode，因爲它應該是。

來源

2013-04-24 06:58:39

這不會刪除'4th'元素，添加'addBack/andSelf'完成任務。 – undefined 2013-04-24 07:00:28

@undefined：是的，我發現，因爲我正在建造[小提琴]（http://jsfiddle.net/davidThomas/wsTnY/），謝謝！ =） – 2013-04-24 07:02:47

這將刪除click元素，但不會刪除包含的SPAN。雖然 – JanvierDesigns 2013-04-24 07:10:18

-1

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

試試這個

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

來源

2013-04-24 06:59:07 bipen

刪除元素，jQuery的 - 第2部分

回答

相關問題