我在使用 .append("...") 時遇到問題。我正在編寫一個簡單的待辦事項列表，并希望在通過引用按鈕類單擊附加的“刪除”按鈕時刪除列表元素。我認為它不起作用，因為 .append() 沒有更改網站的 html 代碼。至少在單擊“添加項目”按鈕后我無法發現差異。你有什么想法？提前致謝！var inputText;var itemList = [];$("#addButton").click(function(){ inputText = $("#textInput").val(); itemList.push(inputText); $("#textInput").val(""); showItems();});//not working$(".deleteButton").click(function(e){ console.log("test"); var className = e.attr("id"); console.log("ID:" + className);});function showItems(){ $("#list").html(''); for(var i=0; i<=itemList.length-1; i++){ $("#list").append('<div class="listelement"><p type="text" class="listItem" id="listItem '+ i +'">'+ itemList[i] +'</p> <button type="button" class="deleteButton" id="'+ i +'">REMOVE</button><div>'); }} <body> <div class="container"> <div class="headline"> <h1 id="headline">TO DO LIST</h1> </div> <div class="userInput"> <input type="text" id="textInput"> <button type="button" id="addButton">ADD ITEM</button> </div> <div class="list" id="list"> <div class="listelement" id="listelement"> </div> </div> </div> <script src="jquery-3.4.1.min.js"></script> <script src="script.js"></script> </body></html>
4 回答
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
您需要使用事件委托。
$(document).on("click",".deleteButton",function(e) {
$(this).closest(".listelement").remove()
});$(".deleteButton").click(function(e){僅適用于頁面上存在的元素，不適用于新添加的元素。
var inputText;
var itemList = [];
$("#addButton").click(function() {
inputText = $("#textInput").val();
itemList.push(inputText);
$("#textInput").val("");
showItems();
});
//not working
$(document).on("click",".deleteButton",function(e) {
$(this).closest(".listelement").remove()
});
function showItems() {
$("#list").html('');
for (var i = 0; i <= itemList.length - 1; i++) {
$("#list").append('<div class="listelement"><p type="text" class="listItem" id="listItem ' + i + '">' + itemList[i] + '</p> <button type="button" class="deleteButton" id="' + i + '">REMOVE</button><div>');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="headline">
<h1 id="headline">TO DO LIST</h1>
</div>
<div class="userInput">
<input type="text" id="textInput">
<button type="button" id="addButton">ADD ITEM</button>
</div>
<div class="list" id="list">
<div class="listelement" id="listelement">
</div>
</div>
</div>
Smart貓小萌
TA貢獻1911條經驗 獲得超7個贊
如果您只想刪除您單擊的特定 div，可以使用以下代碼。這里不需要匹配id。
$(document).on("click",".deleteButton",function(e){
let parent = $(this).closest(".listelement");
parent.remove();
});
但是根據刪除后的代碼，如果添加某些內容，數組的所有數據都會顯示。因為您沒有從數組中刪除數據。我認為您也需要從數組中刪除該數據。
$(document).on("click",".deleteButton",function(e){
let parent = $(this).closest(".listelement");
let id = $(this).attr("id");
console.log(id);
itemList.splice(id, 1);
parent.remove();
});
慕姐8265434
TA貢獻1813條經驗 獲得超2個贊
如果您嘗試使用 jQuery click() 方法對動態添加到 DOM 的元素執行某些操作，它將不起作用，因為它將單擊事件僅綁定到綁定時存在的元素，您可以使用
$(document).on("click", "button.deleteButton" , function() {
$(this).parent().remove();
});https://jsfiddle.net/82d0e5at/3/
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
這里的問題是附加的元素沒有附加事件偵聽器，當您調用它時，$(...).click它只會將事件偵聽器附加到當前存在的元素。deleteButton由于您在文檔加載時調用它，并且當時該類沒有任何元素，因此它不會執行任何操作。
您可以通過將刪除代碼移至其自己的函數并為您創建的每個新元素附加一個單擊事件偵聽器來解決此問題。
為了有效地做到這一點，您需要獲取正在創建的元素，您可以這樣做：
$(HTML Code).appendTo('#list').click(...);
這將從您傳遞的 html 創建一個元素，將其附加到具有 id 的元素list并附加一個單擊事件偵聽器，因此最終結果如下：
var inputText;
var itemList = [];
$("#addButton").click(function() {
inputText = $("#textInput").val();
itemList.push(inputText);
$("#textInput").val("");
showItems();
});
function deleteItem(e) {
console.log(e.target.id);
}
function showItems() {
$("#list").html('');
for (var i = 0; i <= itemList.length - 1; i++) {
var html = '<div class="listelement"><p type="text" class="listItem" id="listItem ' + i + '">' + itemList[i] + '</p> <button type="button" class="deleteButton" id="' + i + '">REMOVE</button><div>';
$(html).appendTo('#list').click(deleteItem);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="headline">
<h1 id="headline">TO DO LIST</h1>
</div>
<div class="userInput">
<input type="text" id="textInput">
<button type="button" id="addButton">ADD ITEM</button>
</div>
<div class="list" id="list">
<div class="listelement" id="listelement">
</div>
</div>
</div>
- 4 回答
- 0 關注
- 240 瀏覽
添加回答
舉報
0/150
提交
取消