Удалить абзац HTML с помощью removeChild

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» и «после часа» - нет.

Если я изменю

на

:

<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

Из веб-документов MDN на <p>:

и, в частности, автоматически закрывается, если перед закрывающим тегом </p> выполняется анализ другого элемента уровня блока.

И список элементов блока W3C гласит, что <hr> является элементом блока.

Таким образом, ваш код оценивается так:

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

Вот почему удаление одного ребенка не работает.Поскольку идентификатор не создается заново, единственным решением является изменение типа элемента - 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>

Answer 3

Ваша проблема ожидается ... из-за тега P может содержать только содержание фразы. Семантически это неправильно, и браузер автоматически добавляет новый элемент P после тега HR ... 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>

одна возможность использования span или div

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