JQuery不刪除添加元素

我想要做的是添加和刪除列表項目。我已經把它添加到列表中，我可以刪除現有的，但不是已經添加的。它看起來好像會起作用，但事實並非如此。任何幫助，將不勝感激！下面的代碼：JQuery不刪除添加元素

JQuery的：

<script type="text/javascript"> 
$(function(){ 
    $('a#add').click(function(){ 
     $('<li><a href="#" id="remove">--</a>List item</li>').appendTo('ul#list'); 
    }); 

    $('a#remove').click(function(){ 
     $(this).parent().remove(); 
    }); 
}); 
</script>

HTML：

<a href="#" id="add">Add List Item</a> 
<ul id="list"> 
<li><a href="#" id="remove">--</a> List item</li> 
<li><a href="#" id="remove">--</a> List item</li> 
<li><a href="#" id="remove">--</a> List item</li> 
<li><a href="#" id="remove">--</a> List item</li> 
</ul>

來源

2010-03-22 Scott

每個文檔的'id'必須是唯一的。改用'class'。 – nickf 2010-03-22 08:47:49

試試這個

$('a#remove').live('click',function(){ 
     $(this).parent().remove(); 
    });

或

$('a#remove').live('click',function(){ 
      $(this).remove(); 
     });

來源

2010-03-22 08:40:44 ant

這不起作用，因爲'this'指向實時事件中的文檔對象。 – Felix 2010-03-22 08:41:58

@Felix發佈您的答案，然後讓我們看看正確的解決方案 – ant 2010-03-22 08:45:27

當我看到您的答案時，我正在撰寫它。現在發佈:) – Felix 2010-03-22 08:47:23

-2

的id屬性應該是獨一無二的，你的HTML是無效的，因此jQuery的不能正常工作（我敢打賭a#remove選擇只選擇第一項）。使用別的東西，如name，這不應該是唯一的。另外，您可能需要使用.parent("li")。以下是我應該這樣做：

的jQuery：

<script type="text/javascript"> 
function setEvents() { 
    $("a#add").click(function() { 
     $("#list").append(
      $("<li>").append(
       $('<a href="#" name="remove">--</a>').click(removeItem) 
      ).append("List item") 
     ); 
    }); 

    $('a[name=remove]').click(removeItem); 
} 
function removeItem(e) { 
    $(this).parent("li").remove(); 
} 
$(document).ready(setEvents); 
</script>

HTML：

<a href="#" id="add">Add List Item</a> 
<ul id="list"> 
<li><a href="#" name="remove">--</a> List item</li> 
<li><a href="#" name="remove">--</a> List item</li> 
<li><a href="#" name="remove">--</a> List item</li> 
<li><a href="#" name="remove">--</a> List item</li> 
</ul>

來源

2010-03-22 08:46:41 Felix

name？爲什麼不「上課」？ – nickf 2010-03-22 08:48:26

感謝您指出身份證問題，我習慣性地將其替換爲課堂上的習慣。 – Scott 2010-03-22 08:59:00

@nickf，因爲類應該首先用於樣式目的，JavaScript第二。爲什麼這是低調的地獄，沒有人對它做任何負面評論.. – Felix 2010-03-22 09:17:14

在這裏你去：

jQuery(function($) { 
    $('#add').click(function(e) { 
     $('<li><a href="#" class="remove">--</a>List item</li>').appendTo('#list'); 
     e.preventDefault(); 
    }); 

    $('.remove').live('click', function(e) { 
     $(this).parent().remove(); 
     e.preventDefault(); 
    }); 
});

來源

2010-03-22 08:52:30 nickf

這看起來像我想的那種東西甚至可以使用一個類去除'標識符。 – belugabob 2010-03-22 08:58:51

與代碼中的問題並不是缺乏唯一的id值 - 但是，呃應該使用一類「移除」 - 主要問題是新添加的項目沒有與它們關聯的點擊處理程序。添加點擊處理程序的代碼在任何新項目創建之前執行。

應該調查使用live（）方法 - 我不能在這方面提供更多的建議，因爲我還沒有必要自己使用它。

來源

2010-03-22 08:57:12 belugabob

感謝您的解釋！ – Scott 2010-03-22 09:00:06

忽略你的元素應該有唯一的ID屬性的事實，有一件事始終牢記：當你綁定功能的事件 - 例如$(selector).bind('click', function)或$(selector).click(function) - 只在DOM中的元素匹配選擇器在特定時刻將按照您的期望行事。如果您在稍後的時間添加了與選擇器相匹配的更多元素，這些元素不會神奇地與期望的行爲關聯。

這是jQuery函數live()存在的原因之一，我鼓勵你看一看。另一種方法是手動將你想要的功能綁定到你添加到DOM中的元素（就像Felix給你展示的那樣）。

來源

2010-03-22 09:00:53 Dan

JQuery不刪除添加元素

回答

相關問題