javascript - 使用removeChild删除HTML段落

Question

我写了如下代码:

     <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>

当我点击按钮时，只有“before hr”消失 - hr 和“after hr”文本不会消失。

如果我将

更改为

:

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

一切正常(即，就像我认为它应该正常工作；))

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

最佳答案

来自MDN web docs on <p> :

and notably will automatically close if another block-level element is parsed before the closing </p> tag.

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

所以你的代码是这样评估的:

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

这就是为什么删除单个子项不起作用的原因。由于不会重新创建 ID，唯一的解决方案是更改元素类型 - a <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/

Answer 1

来自MDN web docs on <p> :

and notably will automatically close if another block-level element is parsed before the closing </p> tag.

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

所以你的代码是这样评估的:

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

这就是为什么删除单个子项不起作用的原因。由于不会重新创建 ID，唯一的解决方案是更改元素类型 - a <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>