使用 JavaScript 删除节点的父元素
删除节点的直接父元素
要删除节点的父元素：
-
使用
document.getElementById()方法选择子节点。 -
使用
parentElement属性来访问父元素。 -
在父级上调用
remove()方法，例如child.parentElement.remove()。
这是此示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- 👇️ want to remove this div -->
<div>
<div id="child">Child 1</div>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const child = document.getElementById('child');
child.parentElement.remove();
Node.parentElement 属性返回 DOM 节点的父元素。
如果节点没有父节点，则
parentElement属性返回 null。
如果这是我们需要处理的事情，我们可以在调用 remove() 方法之前有条件地检查。
const child = document.getElementById('child');
child?.parentElement?.remove();
如果元素没有父元素，我们使用可选的链接 (?.) 运算符来短路而不是抛出错误。
请注意，如果要删除的元素不是直接父元素，则可以多次访问parentElement属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- 👇️ Want to remove this Div -->
<div>
<span>
<div id="child">Child 1</div>
</span>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const child = document.getElementById('child');
child.parentElement.parentElement.remove();
我们访问了 parentElement 属性两次以找到我们想要删除的 div 元素。
如果我们需要删除父元素而不删除其子元素，则可以改用这种方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div style="background-color: salmon">
<div id="child">Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const child = document.getElementById('child');
child.parentElement.replaceWith(...child.parentElement.childNodes);
要删除没有子节点的父节点，我们基本上用它的子节点替换父节点。
删除节点的间接父元素
要删除节点的间接父元素：
-
使用
document.getElementById()方法选择子节点。 -
使用
closest()方法选择间接父元素。 -
调用父级的
remove()方法将其删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- 👇️ want to remove this div -->
<div class="container">
<div>
<span>
<div id="child">Child 1</div>
</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const child = document.getElementById('child');
const parent = child.closest('div.container');
parent.remove();
我们使用了
closest方法而不是 parentElement 属性，因为我们试图删除一个不是直接父元素的元素。
如果元素本身与选择器匹配，则返回该元素。
如果不存在与提供的选择器匹配的元素，则 closest() 方法返回 null。
该方法采用包含选择器的字符串。 提供的选择器可以根据需要指定。
如果向
closest()方法提供了无效的选择器字符串，则会抛出SyntaxError。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
