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