使用JavaScript删除HTML h1空标记

Question

如何仅使用JavaScript删除h1空标签？

<h1>Hello Plunker!</h1>
<p>adadasdasdasdsaddasd</p>


<h1></h1>
<p>adadasdasdasdsaddasd</p>

<h1></h1>
<p>adadasdasdasdsaddasd</p>

<h1></h1>
<p>adadasdasdasdsaddasd</p>

Answer 1

您可以

var els = document.querySelectorAll('h1'), //find all h1
    el;
for (var i = 0; i < els.length; i++) {
    el = els[i];
    //if there is no first child 
    if (!el.firstChild) {
        //remove the node
        el.parentNode.removeChild(el)
    }
}

演示： 小提琴

Answer 2

如果您使用jQuery，请尝试以下操作：

  $('h1').each(function(){
       if($(this).is(':empty')){
         $(this).remove()
       }
    });

有关更多信息，请参见http://api.jquery.com/is/和http://api.jquery.com/empty-selector/

Answer 3

也可以尝试使用CSS空标签：

http://codepen.io/anon/pen/aOOmOj

h1:empty { background: #ccc; display:none; }

Answer 4

使用javascript的最简单解决方案：

while (!document.getElementsByTagName('h1')[0].remove()) {}

是的，我知道，只要不再有h1 ，循环就会以

TypeError: ... is undefined`.

但是，这很 简单 。