jQuery 移除元素

jQuery - 移除元素

jQuery 提供了简单有效的方法，用于从 DOM 中移除现有的 HTML 元素或其内容。

移除元素和内容

jQuery 提供了三种主要的移除方法：

• remove([selector])：完全移除选中的元素（包括所有后代元素、文本节点以及任何关联的数据和事件处理器）。
• empty()：移除选中元素中的所有子元素和文本节点，但保留选中的元素本身。
• detach([selector])：与 remove() 类似，它会从 DOM 中移除选中的元素。但 detach() 会保留所有关联的 jQuery 数据和事件处理器。如果你打算稍后重新插入被分离（detach）的元素，这个方法就很有用。

jQuery remove() 方法

remove() 方法会从页面中完全移除选中的元素及其内部的所有内容。

示例：移除一个特定的 div：

// 移除 id 为 'toBeRemoved' 的元素及其所有子元素
$("#removeDivBtn").click(function() {
  $("#toBeRemoved").remove();
  console.log("id 为 'toBeRemoved' 的 div 已被移除。");
});

jQuery empty() 方法

empty() 方法会移除选中元素内的所有内容（子元素和文本），但保留选中的元素本身在 DOM 中。

示例：清空容器的内容：

// 清空 id 为 'container' 的元素，移除其子元素
$("#emptyContainerBtn").click(function() {
  $("#container").empty();
  console.log("id 为 'container' 的 div 内容已被清空。");
});

jQuery detach() 方法

当你希望临时移除元素，但可能稍后重新插入它们，并且需要保留附加在其上的任何 jQuery 数据或事件监听器时，请使用 detach()。

示例：临时分离（detach）并重新附加（re-attach）一个元素：

let detachedElement = null; // 用于存储被分离元素的变量

// 分离元素
$("#detachBtn").click(function() {
  if (!detachedElement) { // 只有在尚未分离时才执行分离
    detachedElement = $("#interactiveElement").detach();
    console.log("元素已被分离并存储。");
    // 注意：#interactiveElement 上的任何事件处理器都被保留了
  }
});

// 重新附加元素（例如，将其追加回其原来的父元素）
$("#reattachBtn").click(function() {
  if (detachedElement) {
    $("#originalParent").append(detachedElement);
    detachedElement = null; // 清空变量
    console.log("元素已重新附加。");
  }
});

过滤要移除/分离的元素

remove() 和 detach() 都接受一个可选的选择器参数。这个参数用于在移除/分离 之前 过滤选中的元素集合。

示例：只移除带有 ‘obsolete’ 类的段落：

// 选中所有段落，但只移除带有 class='obsolete' 的段落
$("#removeObsoleteBtn").click(function() {
  $("p").remove(".obsolete");
  console.log("过时的段落已移除。");
});

示例：移除带有 ‘temporary’ 或 ‘archived’ 类的段落：

// 选中所有段落，然后移除匹配任一类的段落
$("#removeTempArchivedBtn").click(function() {
  $("p").remove(".temporary, .archived");
  console.log("临时和已归档的段落已移除。");
});

jQuery HTML 操作参考

要全面了解所有用于添加、移除和操作 HTML 元素的 jQuery 方法，请访问官方的 jQuery 操作文档。