使用 javascript 删除 html

Removing html with javascript

本文关键字：html 删除 javascript 使用      更新时间：2023-09-26

我正在尝试用javascript（no 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 = '';

getElementsByClassName 返回类似数组的对象，因此您需要按索引访问元素：

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

该类的所有元素的 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)
});
相关文章：