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

一切正常（即我认为它应该正常工作；））

有人能解释一下原因吗？

Answer 1

你的代码不正确，不可能把<hr>放在

里面

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

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

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

       after hr 
    </p>

一种可能使用 span 或 div

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

Answer 2

您的HTML无效。使用 a validator.

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

这意味着  元素被 <hr> 隐式结束 并且  标签被丢弃，因为它没有匹配一个开放的 .

结果 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 3

来自MDN web docs on ：

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

并且 W3C list of block elements 指出 <hr> 是块元素。

所以你的代码是这样计算的：

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

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

你的问题是意料之中的...因为P标签只能包含Phrasing内容。语义不正确，浏览器会自动在 HR 标签后添加一个新的 P 元素...

正如你所说的 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>

使用 removeChild 删除 HTML 段

Remove HTML paragraph using removeChild

javascript

html

removechild