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

但是，這很 簡單 。