當被使用jQuery

我有這樣的HTML代碼在這裏刪除他人如何動態刪除HTML元素：當被使用jQuery

<div class="container"> 
    <section> 
     <header class="date">May 2014</header> 
     <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit</article> 
     <article>Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit aperiam placeat minus ratione mollitia expedita tempore reprehenderit maxime.</article> 
     <article>ratione mollitia expedita tempore reprehenderit maxime.</article> 
     <a href="#">Remove Article</a> 
    </section> 

    <section> 
     <header class="date">March 2014</header> 
     <article>Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit aperiam placeat minus ratione mollitia expedita tempore reprehenderit maxime unde quas beatae maiores. 
     </article> 
     <a href="#">Remove Article</a> 
    </section> 

    <section> 
     <header class="date">April 2014</header> 
     <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</article> 
     <article>Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit aperiam placeat minus ratione mollitia expedita tempore reprehenderit maxime unde quas beatae maiores. 
     </article> 
     <a href="#">Remove Article</a> 
    </section> 
    </div>

當我點擊「刪除文章」鏈接我應該刪除上述文章的一個我已經得到了。

現在我在這裏想要完成的是，當我刪除所有屬於特定部分的所有文章'一個一個'我需要自動將頭'日期'和鏈接'刪除文章'被完全刪除。

我試過不同的方法，但s直到我可以看到標題和鏈接，但是當我刷新頁面時，它們都消失了。

來源

2014-05-09 egyamado

安置自己的JavaScript，請。 – j08691

我想我找到了你。你想要刪除article嗎？如果沒有更多的刪除section？如果是的話，這應該工作：

$('a').on('click', function (e) { 
    e.preventDefault(); 

    var $section = $(this).closest('section'), 
     $articles = $section.find('article'); 

    $articles.last().remove(); 


    // $articles.length will not be one less just because we removed 
    // an item, so just checking for 1 here is the same as checking 
    // if it's empty. 

    if ($articles.length === 1) { 
    $section.remove(); 
    } 
});

來源

2014-05-09 20:42:30

是的，這就是我一直在尋找的。每次我點擊「刪除文章」刪除一個。當我刪除最後一篇文章時，刪除包含標題和鏈接的整個部分。在我問這個問題之前，我完成了一部分，我錯過了[last（）。remove]。謝謝 – egyamado

你試過將this.parentElement.remove（）綁定到你的html中的元素嗎？它將刪除整個部分。

$('.container a').click(function(){ 
    this.parentNode.remove() 
}

來源

2014-05-09 20:40:07 deweyredman

因爲它沒有回答OP的問題，所以這會更好。 –

注意這個目前在任何版本的IE –

都不支持。我會將其更改爲節點 – deweyredman

更新：刪除每篇文章，直到只剩下一個部分，然後刪除最後一篇文章和部分。感謝@Barmar指出我的錯誤。

$('body').on('click', '.container a', function (e) { 
    e.preventDefault(); 
    var articleLength = $(this).closest('section').find('article').length; 
    if (1 != articleLength) { 
     $(this).closest('section').find('article:last').remove(); 
    } else { 
     $(this).closest('section').remove(); 
    } 
});

來源

2014-05-09 20:40:31

即使其中還有其他物品，也會刪除該部分。他只想在刪除所有物品時刪除該部分。 – Barmar

啊 - 我會編輯 –

$('section a').on('click', function(e) { 
    e.preventDefault(); 
    var self = $(this); 
    var articles = self.siblings('article'); 
    if (articles.length > 1) { 
     articles.last().remove(); 
    } 
    else { 
     self.parent().remove(); 
    } 
})

JSFiddle

來源

2014-05-09 20:46:33 happyjack

當被使用jQuery

回答

相關問題