刪除父不適用於jQuery

Question

我正在練習jQuery，通過附加一個刪除輸入，我成功地在輸入字段中附加了內容，但無法刪除附加的輸入字段。 我也對我的代碼中的parent（）感到困惑。

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#add').click(

function(){
$('#a').append('<div><input type="text"  name="ingre[]"><button class="remo">remove</button></div>');

});



});

$(document).ready(function(){
$(".remo").click(function(){
//alert('ok');
$(this).parent('.remo').remove();

});
});
</script>
</head>

<body class="ancestors">
<button id="add">Add</button>
<div id='a'>
<input type="text" >

</div>
</html>

Answer 1

刪除將不起作用，因為您要將事件附加到.remo類中存在的所有當前元素。 單擊添加后，將創建一個沒有綁定處理程序的新元素，因此不會刪除任何內容。 解決方案是事件委托，請替換為：

$(".remo").click(function(){
    $(this).parent('.remo').remove();
});

有了這個：

$("#a").on('click', '.remo', function(){
    $(this).closest('div').remove();
});

Answer 2

 $(document).ready(function(){ $('#add').click(function(){ $('#a').append('<div><input type="text" name="arr[]"><button class="remo">remove</button></div>'); }); $('#a').on('click', '.remo', function(){ $(this).parent().remove(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body class="ancestors"> <button id="add">Add</button> <div id='a'> <input type="text" > </div>

刪除父不適用於jQuery

問題描述

2 個解決方案

解決方案1
1 已采納 2015-06-04 18:07:07

解決方案2
1 2015-06-04 18:08:34

刪除父不適用於jQuery

問題描述

2 個解決方案

解決方案1 1 已采納 2015-06-04 18:07:07

解決方案2 1 2015-06-04 18:08:34

解決方案1
1 已采納 2015-06-04 18:07:07

解決方案2
1 2015-06-04 18:08:34