使用 jQuery 删除动态插入的 html答案

【问题标题】：Removing dynamically inserted html with jQuery使用 jQuery 删除动态插入的 html
【发布时间】：2009-06-04 11:34:26
【问题描述】：

我正在尝试从列表中动态创建和删除项目，它工作得很好......有点，我可以删除项目并创建项目，但是创建项目后，我无法再次删除它，但我可以删除页面加载时存在的项目。

这是我的代码

<div class="list">
    <div class="item">
        <input type="text" value="" />
        <a href="" class="removeitem">Remove this item</a>
    </div>
    <div class="item">
        <input type="text" value="" />
        <a href="" class="removeitem">Remove this item</a>
    </div>
    <a href="" class="additem">Add item to list</a>
</div>

<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    return false;
});

// Remove item from list
$('.removeitem').click(function(){
    $(this).prev().parent().remove();
    return false;
});
</script>

我可以删除 2 个原始项目，但是当我创建新项目时，它们无法删除

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要使用live events，而不是您目前使用的正常样式。

点击事件在加载时被绑定，此时只有原始项目被绑定。

你会像这样使用现场活动：

<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    return false;
});

// Remove item from list
$('.removeitem').live("click", function(){
    $(this).prev().parent().remove();
    return false;
});
</script>

使用实时事件存在开销（它必须监视 DOM 中的所有事件并检查它们是否匹配，我相信）。因此，仅在必要时使用它们。

【讨论】：

【解决方案2】：

变化：

$('.removeitem').click(function(){
    $(this).prev().parent().remove();
    return false;
});

到：

$('.removeitem').live("click", function(){
    $(this).prev().parent().remove();
    return false;
});

【讨论】：

【解决方案3】：

这行得通吗？

$('.removeitem').live("click", function(){
$(this).parent('div.item').remove();
return false;
});

如您所知，其他使用 .live() 是个好主意。

【讨论】：

【解决方案4】：

实时事件的另一个选项是将点击事件附加到您的模板：

$('.additem').click(function(){
   var template = $($(this).prev().get(0)).clone();
   template.insertBefore($(this));
   $(template).click( function() { 
      $(this).prev().parent().remove();
      return false;
   };
   return false;
});

这样您就无需处理现场活动的开销。如果您确实选择这样做，您可能希望将删除代码拉入一个函数，例如：

<script type="text/javascript">
  function removeitem() {
      $(this).prev().parent().remove();
      return false;
  }
  // Add item to list
  $('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    $(template).click(removeitem);
    return false;
  });
  // Remove item from list
  $('.removeitem').click(removeitem);
</script>

【讨论】：