jQuery：删除通过 ajax 加载的 DOM 元素答案

【问题标题】：jQuery: Remove DOM element loaded via ajaxjQuery：删除通过 ajax 加载的 DOM 元素
【发布时间】：2010-02-16 19:05:07
【问题描述】：

我正在使用 jQuery 将 ajax 内容加载到页面上。但是，尝试使用 jQuery 的 .remove() 函数似乎无法删除动态加载的元素。

我的示例函数：

function deletePerson(personID){
    if (confirm("Are you sure you want to permanently delete this person?\nYou cannot undo this action.")){
      $.post("ajax/personsDelete.php", { personNo: personID },
          function(data){
              $('#person' + personID).remove();
              alert("Response: " + data);
          });
    }
}

如何使用 jQuery 删除动态加载的元素？

【问题讨论】：

应该没问题，personID包含什么值，html元素长什么样子？
您确定 personID 在回调函数中包含正确的值吗？
你能显示ajax加载部分的代码吗？
阅读这篇文章后：stackoverflow.com/questions/1903788/… 我决定通过.load() 重新加载标签... 更笨拙但更可靠。（我在我的桌子上使用 tablesorter）
元素的来源没有任何区别，即它是在页面上加载还是动态加载。 jQuery 将按原样查看 DOM 并删除元素。几乎可以肯定，您的元素 ID 不正确。使用 firebug 查看元素并确认 #person+personID 可以等于您尝试删除的 ID。

标签： jquery ajax dom element

【解决方案1】：

更改选择器的上下文以查看响应，添加,data：

function deletePerson(personID){
    if (confirm("Are you sure you want to permanently delete this person?\nYou cannot undo this action.")){
      $.post("ajax/personsDelete.php", { personNo: personID },
          function(data){
              $('#person' + personID, data).remove();
              alert("Response: " + data);
          });
    }
}

由于它尚未添加到文档中，因此您调用的默认选择器将找不到它：
$('#person' + personID) 与 $('#person' + personID, document) 相同

【讨论】：