刪除/恢復元素，維護它們的事件和元素的子元素

我遇到了一種情況，我需要以某種方式編輯以下內容，在某些情況下（讓我們假設「click」事件）需要刪除（或解開？）.container和.header，並且.itemlist仍然可見/可用在頁面上。然後，我需要將.container和.header重新恢復到其他某個事件，同時仍然保留a標記上的事件偵聽器，並且如果可能的話，無需從DOM中刪除所述項目。這可能嗎？刪除/恢復元素，維護它們的事件和元素的子元素

<ul class="container"> 
    <li class="header"><a href="#">delete</a> | <a href="#">edit</a></li> 
    <ul class="itemlist"> 
     <li>some item</li> 
     <li>some other item</li> 
    </ul> 
</ul>

來源

2010-05-25 Kemal Emin

DEMO：http://jsbin.com/iwiju3

這只是一個概念驗證，不知道是你想要的，但讓我知道！

$(function() { 
    $("button").toggle(function() { 
     $(".container").wrap('<span></span>'); //wrap all with span 
     $(".itemlist").unwrap(); //unwrap container 
     $(".header").hide(); //hide header 
    }, 
    function() { 
     $("span").wrap('<ul class="container"></ul>'); //rewrap with container 
     $(".itemlist").unwrap(); //remove span 
     $(".header").show(); //show header 
    }); 
});

注意：如果你需要在第二次再次創建.header，沒有任何理由將其刪除，只是躲起來！ .container可以解開，但由於.header和.itemlist是兩個不同的元素，你需要用它來包裝它，如<span>第二次包裝它！

來源

2010-05-25 10:16:10

刪除/恢復元素，維護它們的事件和元素的子元素

回答

相關問題