Removing html with javascript

Question

I am trying to delete a whole block of html with javascript(no jquery).

Source

 <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="  - [email protected]" 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:[email protected]">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>

Desired result The whole block of code should be remove

My attempt

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

You have a syntax error as modox2 pointed out. See: MDN Document.getElementsByClassName for correct usage. Use a loop to delete the content of multiple elements. — Yogi
– Yogi, Commented Mar 19, 2016 at 18:55

madox2 · Accepted Answer · 2016-03-19 18:45:13Z

4

getElementsByClassName returns array-like object, so you need to access element by index:

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

answered Mar 19, 2016 at 18:45

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2650277 Over a year ago

Thanks for the tip for the new JS like...what if i want to remove every instanace of class="dropdown hidden-xs" ,

user2650277 Over a year ago

I mean is there a shoter way than using a loop

madox2 Over a year ago

@user2650277 I think it is not possible without a loop. E.g. elements.forEach(function(el) { el.innerHTML = ''; })

baao · Accepted Answer · 2016-03-19 19:07:27Z

1

To set the html of all elements with that class to '', you'll need a loop.

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

Or, to really delete them, use:

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

answered Mar 19, 2016 at 19:07

baao

73.5k18 gold badges152 silver badges208 bronze badges

Collectives™ on Stack Overflow

Removing html with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related