如何删除包括其所有子节点的父节点

Question

我正在学习JavaScript的基础知识，现在遇到了DOM问题。我陷入了困境，不知道如何删除一个父节点及其所有子节点。例如，我有以下HTML代码:

<ul id ="parent">
    <li>Hi</li>
    <li>How</li>
    <li>Are</li>
    <li>You</li>
</ul>

我想删除包含所有子节点<li>的<ul>元素。我尝试使用以下代码document.getElementById('parent').removeNode(true);，但是它并没有起作用。是否有人能帮助我？

- ScoRpion

---

如果你感兴趣的话，Jquery可能会很有帮助。 - Ajinkya

感谢您的关注，我对学习JavaScript很感兴趣，并且并没有被绑定到这个任务上。我正在寻找一个JavaScript方法。 - ScoRpion

@Ajinkya - 不要试图劝说别人不使用“纯”JavaScript。是的，jQuery很棒，但对DOM如何工作的一些了解永远不是坏事。 - nnnnnn

@nnnnnn：完全同意。我只是建议看一下（在了解JavaScript之后）。如果我误导了您，我很抱歉。（我想我爱上了Jquery） - Ajinkya

建议使用一个 4,000 行的库来完成只需要一行脚本的事情是不明智的。而且考虑到 OP 正试图学习基本的 JavaScript，这样做尤其没有帮助。 - RobG

Answer 1

你需要获取一个 ul 元素的引用，然后通过将 ul 的引用作为参数传递给其父元素的 removeChild 方法来请求其父元素删除该元素。

这是在没有使用 jQuery 框架的情况下如何做到的：

var x = document.getElementById('parent');
x.parentNode.removeChild(x);

当然，如果你使用jQuery，代码会变得非常简单，像这样：

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

- Roman

---

@Arman 非常感谢，它起作用了，但是这里使用变量x是必要的吗？我们能否不使用它来完成吗？ - ScoRpion

@Showket，是的，你可以这样做。我将它分成两个步骤，以便更容易阅读。你应该按照自己舒适的方式来做。 - Roman

@eureka，从技术上讲，他懂JavaScript。他只需要知道如何使用JavaScript操作DOM。因此，我尝试向他展示不同的替代方案。 - Roman

@Showket - 你需要 x 变量，否则你就必须重复整个 document.getElementById('parent') - 注意第二行出现了两次 x。 - nnnnnn

@nnnnnn，代码可以这样编写，以避免使用“x”变量：document.getElementById('parent').parentNode.removeChild(document.getElementById('parent')); - Roman

这不就是我刚说的吗？（或者至少是我暗示的吗？） - nnnnnn

Answer 2

试试这个：

var childNode = document.getElementById("parent");
childNode.parentNode.removeChild(childNode);

- hungneox

---

可能需要使用 var 声明 childNode，以避免创建全局变量。 - nnnnnn

这只会删除子节点，但父节点仍然存在，例如<ul><li></li></ul>，li被删除了，但<ul></ul>仍然存在。 - Achuth hadnoor