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

＆＃13;

$(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();
    });
});

＆＃13;

<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>

＆＃13;

删除父不在jquery中工作

2 个答案: