JavaScript 按 ID 删除元素 | D栈 - Delft Stack

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

在 JavaScript 中将 `outerHTML` 属性设置为空字符串以按 ID 删除元素

在这个方法中，我们通过分配一个空字符串来选择元素并删除 HTML 内容。

<!DOCTYPE html>
<html lang="en">
   <title>Document</title>
</head>
   <h1 id="app">Hello World!!</h1>
   <p id="removeme">Remove Me</p>
</body>
<script>
   document.getElementById("removeme").outerHTML = "";
</script>
</html>

这是一种简单的方法，但由于以下限制而很少使用：

它的速度比


    removeChild()

和其他较新的 ES5 方法如


    remove()

慢 5-10%。

旧版本的 Internet Explorer 不支持。

在 JavaScript 中使用 `removeChild()` 按 ID 删除元素

我们首先使用其 id 选择元素，然后在此方法中调用其父级的 removeChild() 函数。这种方法提供了维护 DOM 树结构的优点。

它迫使我们模仿从树中删除元素的内部行为，这样我们就不会删除父节点本身。

<!DOCTYPE html>
<html lang="en">
   <title>Document</title>
</head>
   <h1 id="app">Hello World!!</h1>
   <p id="removeme">Remove Me</p>
</body>
<script>
   function remove(id) 
     var element = document.getElementById(id);
     return element.parentNode.removeChild(element);
   remove("removeme");
</script>
</html>
在 JavaScript 中使用 remove() 按 ID 删除元素
remove() 方法是作为 ES5 的一部分引入的。它允许我们直接删除元素而不去其父元素。但与 removeChild() 方法不同，它不返回对已删除节点的引用。
<!DOCTYPE html>
<html lang="en">
   <title>Document</title>
</head>
   <h1 id="app">Hello World!!</h1>
   <p id="removeme">Remove Me</p>
</body>
<script>
   document.getElementById("removeme").remove();
</script>
</html>
    作者： Harshit Jindal
            Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
                LinkedIn

推荐文章

风流倜傥的香烟 · js如何实现抠图 | PingCode智库

1 周前

瘦瘦的人字拖 · qtextbrowser,如何使用？添加一行，删除一行，行的背景颜色设置，请给出实际例子 - CSDN文库

4 天前

威武的冰棍 · blog/posts/关于JavaScript单线程的一些事.md at master · JChehe/blog · GitHub

3 天前

叛逆的长颈鹿 · offset commit failed with a retriable exception. you should retry committing - CSDN文库

3 天前

坚强的骆驼 · 国家一二等水准测量规范gb/t12897-2006 - CSDN文库

昨天

满身肌肉的跑步鞋 · badminton court - 英中– Linguee词典

4 月前

慷慨大方的猕猴桃 · 机智云|物联网云平台，智能IoT开发云平台，智能IoT软件开发平台 ...

5 月前

坚强的伤疤 · 外地车可以进来吗，怎么限行的-南京旅游问答【携程攻略】

1 年前

刚分手的小刀 · 电信宽带套餐价格表2023_低至99元-深圳电信宽带-电信宽带受理中心

1 年前

有胆有识的玉米 · 凡客白色T恤怎么样| 凡客白色T恤好吗_什么值得买

1 年前

教程

贴士文章

函数参考

在 JavaScript 中将 outerHTML 属性设置为空字符串以按 ID 删除元素

在 JavaScript 中使用 removeChild() 按 ID 删除元素

在 JavaScript 中使用 remove() 按 ID 删除元素

在 JavaScript 中将 `outerHTML` 属性设置为空字符串以按 ID 删除元素

在 JavaScript 中使用 `removeChild()` 按 ID 删除元素

在 JavaScript 中使用 `remove()` 按 ID 删除元素