在jQuery中使用最接近的（）時發生錯誤

Question

我只能按刪除按鈕一次刪除每個li。這是爲什麼發生？

<input type="text" placeholder ="Add List" id="listItem"/> 
<button id="addButton">add Item</button> 
<ul id="output"></ul> 


$(document).ready(function(){ 
    $('#addButton').click(function(){ 
     var listItem = '<li>' + $('#listItem').val(); 
     listItem += '<button id = "deleteButton">Delete</button'; 
     listItem += '</li>'; 
     $('#output').append(listItem); 

     $('#deleteButton').click(function() { 
      $(this).closest('li').remove(); 
     }); 
    }); 
}); 

Answer 1

由於您的按鈕被動態地添加，你需要使用event delegation附加點擊事件，這些新添加的刪除按鈕：

$('#output').on('click', '.deleteButton', function() { 
    $(this).closest('li').remove(); 
}); 

順便說一句，id是獨一無二的，你應該使用class代替爲您的按鈕

Answer 2

試試這個

$(document).ready(function(){ 
    $('#addButton').click(function(){ 
     var listItem = '<li>' + $('#listItem').val(); 
     listItem += '<button id = "deleteButton">Delete</button'; 
     listItem += '</li>'; 
     $('#output').append(listItem); 
    }); 

    $('#output').on('click', '.deleteButton', function() { 
      $(this).closest('li').remove(); 
     }); 

}); 

Answer 3

元素的ID必須是唯一的，所以使用class來分組類似的元素。還可以使用event delegation

$(document).ready(function() { 
    $('#addButton').click(function() { 
     var listItem = '<li>' + $('#listItem').val(); 
     listItem += '<button class="deleteButton">Delete</button'; 
     listItem += '</li>'; 
     $('#output').append(listItem); 
    }); 
    $('#output').on('click', '.deleteButton', function() { 
     $(this).closest('li').remove(); 
    }); 
}); 

演示：Fiddle

當您使用ID選擇器將只獲取與該ID的第一個元素。

Answer 4

試試這個解決方案。

HTML代碼：

<input type="text" placeholder ="Add List" id="listItem"/> 
<button id="addButton">add Item</button> 
<ul id="output"></ul> 

JS代碼：

$('#addButton').click(function(){ 
    var listItem = '<li>' + $('#listItem').val(); 
    listItem += '<button class = "deleteButton">Delete</button'; 
    listItem += '</li>'; 
    $('#output').append(listItem); 
}); 

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

工作實例：http://jsfiddle.net/QFR5f/

Answer 5

$(document).ready(function(){ 
    $('#addButton').unbind("click").click(function(){ 
     var listItem = '<li>' + $('#listItem').val(); 
     listItem += '<button class = "deleteButton">Delete</button>'; 
     listItem += '</li>'; 
     $('#output').append(listItem); 

     $('.deleteButton').click(function() { 
      console.log($(this).closest('li')) 
      $(this).closest('li').remove(); 
     }); 
    }); 
}); 

你要全部刪除按鈕分配相同的ID問題在哪裏。

注 - 雖然HTML不會抗拒具有相同ID的多個元素元素，但我們不應該擁有。 :)