jQuery - 删除元素

过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

实例

$("#div1").remove();

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

实例

$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

实例

$("p").remove(".italic");

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下几种：

方法	描述
append()	在所选元素的末尾插入内容
prepend()	在选定元素的开头插入内容
after()	在选定元素后插入内容
before()	在选定元素之前插入内容

而用于删除元素的方法有：

方法	描述
remove()	删除被选元素容，包括子元素
empty()	删除被选元素的所有子节点和内容

append()方法

append() 方法可以在指定元素的末尾插入内容。

语法如下：

$(selector).append(content,function(index,html))

content：规定要插入的内容，可以包含 HTML 元素、jQuery 对象、DOM 元素。
function(index,html)：规定返回待插入内容的函数，index 为集合中元素的索引位置，html 为被选元素的当前 HTML。

示例：

我们来看下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").append("侠课岛");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>点击追加文本</button>
</body>
</html>

点击按钮，在指定的 <p> 标签末尾添加文本内容 “侠课岛”，我们可以在浏览器中看一下演示结果：

除了文本内容，我们还可以在元素中添加 HTML ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("ul").append("<li>strawberry</li>");
    });
  });
</script>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>pear</li>
    <li>peach</li>
    <li>watermelon</li>
  </ul>
  <button>点击追加文本</button>
</body>
</html>

在浏览器中的演示结果：

prepend()方法

prepend() 方法其实和 append() 方法类似，语法也差不多。但是 prepend() 方法主要用于在被选元素的开头插入指定内容。

语法如下：

$(selector).prepend(content,function(index,html))

示例：

我们将上述示例中的 append() 方法改成 prepend() 方法：

$(function(){
    $("button").click(function(){
      $("ul").prepend("<li>strawberry</li>");
    });
});

然后看一下在浏览器中的演示结果：

after()方法

after() 方法用于在被选元素后插入指定的内容。看起来 after() 方法和 append() 方法的作用好像差不多，但是其实两个方法还是有区别的。 append() 方法是在被选元素的结尾插入内容，插入的内容仍然在元素内部。而 after() 插入的内容会重新起一行，与被选择的元素并没有什么逻辑上的联系。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").after("<p>侠课岛</p>");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>点击追加文本</button>
</body>
</html>

在浏览器中的演示效果：

before()方法

before() 方法用于在被选元素之前插入指定的内容。它和 prepend() 方法的区别在于一个在被选元素内插入内容，一个在被选元素外。

注意 before() 方法和 after() 方法都是在被选元素外插入内容。append() 和 prepend() 方法都是在被选元素内插入内容。

示例：

例如将上述示例中的方法改为 before：

$(function(){
    $("button").click(function(){
      $("p").before("<p>侠课岛</p>");
    });
});

在浏览器中的演示效果：

remove()方法

remove() 方法用于删除被选元素及其子元素。该方法也会删除被选元素的数据和事件。

示例：

例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").remove();
    });
  });
</script>
</head>
<body>
  <p>你好，欢迎来到侠课岛！</p>
  <button>点击删除</button>
</body>
</html>

在浏览器中的演示效果：

从上图中可以看到，remove() 方法将指定的 p 元素连标签带元素全部删除。

empty()方法

empty() 方法用于删除被选元素的所有子节点和内容。该方法不会移除元素本身，或它的属性。

示例：

我们讲上述示例中的 remove() 方法改为empty() 方法，看看有什么不同：

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在浏览器中的演示效果：

可以看到 empty() 方法只会删除指定元素中的内容，不会删除元素本身，当然如果元素上有属性，属性也不会被删除，大家可以自己试一下。

解如何使用 JavaScript 通过 ID 轻松删除 HTML DOM 中的元素。

在本文中，我们将学习如何使用 JavaScript 通过 ID 轻松删除 HTML DOM 中的元素。

元素 remove() 方法

要按 ID 删除 DOM 元素，请使用 getElementById() 方法选择具有 ID 的元素，然后对该元素调用 remove() 方法。

例如：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <div class="box" id="box-1">This is a box</div>    <script src="index.js"></script>
  </body>
</html>

以下是我们如何删除具有 box-1 id 的元素：

index.js

const box = document.getElementById('box-1');
box.remove();

getElementById() 方法接受一个字符串并返回 DOM 中具有与该字符串匹配的 ID 的元素。

如果没有匹配 ID 的元素，getElementByID() 将返回 null。

index.js

const box = document.getElementById('box-5');
console.log(box); // null

如果没有带有 ID 的 DOM 元素，我们可以使用可选的链接运算符 (?.) 来调用 remove() 以避免导致错误。

可选的链接运算符不会导致错误，而是会阻止方法调用并返回未定义的。

index.js

const box = document.getElementById('box-5');
box?.remove(); // no error thrown

如何在不移除子元素的情况下移除 DOM 元素

remove() 方法删除一个 DOM 元素及其子元素。如果想要将元素的子元素保留在 DOM 中怎么办？

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>    <div id="parent">
      <p>Child 1</p>
      <p>Child 2</p>
    </div>    <script src="index.js"></script>
  </body>
</html>

要移除 ID 为 parent 的 div 元素但保留其子元素，我们可以在 div 上调用 replaceWith() 方法，将元素的子元素作为参数传递。

index.js

const element = document.getElementById('parent');element.replaceWith(...element.childNodes);

现在文档的标记将如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <p>Child 1</p>
    <p>Child 2</p>    <script src="index.js"></script>
  </body>
</html>

childNodes 属性返回元素的子节点列表。我们使用它来获取元素的子元素。

replaceWith() 方法用一组 Node 或字符串对象替换 DOM 中的元素。我们在元素上调用它以用子元素替换它。

关注七爪网，获取更多APP/小程序/网站源码资源！

在线咨询

上一篇：7个你值得关注的CSS专家及CSS主题
下一篇：学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery - 删除元素

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

您的项目需求