如何使用 jQuery 删除 div 元素

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() function 将绑定到稍后添加到 DOM 的元素。

Answer 2

确保 javascript 在DOM load之后加载。

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