javascriptでhtmlを取り除く

Question

javascript（jqueryなし）でhtmlのブロック全体を削除しようとしています。

ソース

<li uib-dropdown="" class="dropdown hidden-xs"> 
       <a uib-dropdown-toggle="" class="dropdown-toggle pointer" "="" aria-haspopup="true" aria-expanded="false"> 
           <img width="22" title=" - xyz@gmail.com" height="22" class="img-rounded profile-img" src="https://www.gravatar.com/avatar/edft80b9a51f775c8ee562ca89345318b"> &nbsp; 
           <!-- <b class="caret"></b> --> 
        <i class="fa fa-caret-down"></i> 
       </a> 
       <ul class="dropdown-menu small-dropdown-menu"> 
        <li><a href="https://app.example.com/#/account">Account</a></li> 
        <li><a href="https://app.example.com/#/account/billing">Billing</a></li> 
        <li><a href="https://app.example.com/#/account/team">Team</a></li> 
        <li><a href="https://app.example.com/#/account/plans">Plans</a></li> 
        <li class="hidden-lg"><a class="pointer" title="Ask us a question, report a bug or suggest a feature!" href="mailto:help@example.com">Contact</a></li> 
           <hr> 
        <li><a target="_self" href="https://app.example.com/logout"><i class="fa fa-sign-out"></i> Logout</a></li> 
       </ul> 
       </li> 

所望の結果が コードのブロック全体が私の試み

document.getElementsByClassName('dropdown hidden-xs').innerHTML = ''; 

Answer 1

getElementsByClassNameリターンを削除する必要があります配列のようなオブジェクトなので、あなたがインデックスで要素にアクセスする必要があります。

document.getElementsByClassName('dropdown hidden-xs')[0].innerHTML = ''; 

Answer 2

''にそのクラスを持つすべての要素のHTMLを設定するには、ループをする必要があります。

Array.prototype.forEach.call(document.getElementsByClassName('dropdown hidden-xs'), function(el) { 
    el.innerHTML = ''; 
}); 

それとも、実際にそれらを削除するには、使用：あなたは

Array.prototype.forEach.call(document.getElementsByClassName('dropdown hidden-xs'), function(el) { 
    el.parentNode.removeChild(el) 
});