Question

当我想删除div元素时，我有以下代码：

<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>
<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>
<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>
<div class='text-field'>
     <input type='text' />
     <input type='button' class='remove-btn' />
</div>

当我单击remove-btn时，应删除其父div文本字段。我有这个代码，但它不起作用。

$(".remove-btn").click(function(){
    $(this).parent().remove();
});

感谢您的帮助。：）

Answer 1

最常见的原因是您可能在元素加载到DOM之前尝试绑定到click事件。尝试将jQuery代码包装在：

中

$(document).ready(function() {
  // your code here
});

还有.live()函数，它将绑定到稍后添加到DOM的元素。

Answer 2

确保DOM load之后加载了javascript。

$(function(){
 $(".remove-btn").click(function(){
    $(this).parent().remove();
 });
});

Answer 3

在阅读完评论后，您应该做些什么：

$("#add-file-field").click(function() {
    $("#text").append("<div class='text-field'><input type='text' /> <input type='button' class='remove-btn' value='remove' /></div>");
});

$(".remove-btn").live('click',function() {
    $(this).parent().remove();
});

如何使用jQuery删除div元素

3 个答案: