javascript - 使用removeChild删除HTML段落

我写了如下代码：


   

     <input type="button" value="remove" onclick="remove()"/>

     <p id="p2">
        before hr
        <hr/>
        after hr
     </p>

  <script>
     function remove() {
        var p = document.getElementById('p2');
        p.parentNode.removeChild(p);
     }
  </script>

当我按下按钮时，只有“ hr之前”消失-hr和“ hr之后”文本不会消失。

如果我将

更改为

：

<div id="p2">
    before hr
    <hr/>
    after hr
 </div>

一切都正常工作（即像我认为的那样;））

有人可以解释一下原因吗？

最佳答案

从MDN web docs on <p>：


  并且特别是如果在关闭</p>标记之前解析了另一个块级元素，它将自动关闭。


W3C list of block elements指出<hr>是一个块元素。

因此，您的代码将按以下方式进行评估：

<p id="p2">
  before hr
</p>
<hr />
<p id="p2">
  after hr
</p>

这就是为什么删除一个孩子不起作用的原因。由于未重新创建ID，因此唯一的解决方案是更改元素类型-<div>可以正常工作：

function remove() {
  var p2 = document.getElementById("p2");
  p2.parentNode.removeChild(p2);
}

<input type="button" value="remove" onclick="remove()" />

<div id="p2">
  before hr
  <hr/> after hr
</div>

关于javascript - 使用removeChild删除HTML段落，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56361107/