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

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

如果我将<p>更改为<div>：

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

一切正常（例如，我认为应该可以工作；））

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

Answer 1

您的HTML无效。 使用验证器 。

<p>元素可能不包含<hr>元素，但是<p>元素的结束标记是可选的。

这意味着<p>元素以<hr> 隐式结束 ，并且</p>标记被丢弃，因为它与打开的<p>不匹配。

产生的DOM如下所示：

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

由于<hr>元素及其后的文本节点不在段落内，因此在删除段落时也不会删除它们。

减少的测试用例已经减少了很多，以至于无法推断出内容的正确语义，但是也许您需要类似以下内容：

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

Answer 2

从<p>的MDN Web文档中 ：

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

W3C块元素列表指出<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> 

Answer 3

您的问题已预期...由于P标签只能包含短语内容。 从语义上讲是不正确的，浏览器会在HR标签之后自动添加新的P元素... https://stackoverflow.com/a/23536324/2894798

正如您对div所说的那样，它将起作用..那将是正确的答案..

 <input type="button" value="remove" onclick="remove()"/> <div id="p2"> before hr <hr/> after hr </div> <script> function remove() { var p = document.getElementById('p2'); p.parentNode.removeChild(p); } </script> 

Answer 4

您的代码不正确，无法将<hr>放在<p>

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

在一个好的浏览器中，浏览器更正您的代码

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

       after hr 
    </p>

一种可能性使用跨度或div

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