Modify an element's class inside another element in Javascript

Question

So my HTML snippet looks something like this:

<div class="accordion-heading ">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" target="_self" href="#item-name">
        <b class=""> Items ({{vm.selectedItems.length}})</b>
        <i class='fa fa-chevron-down'></i>
    </a>
</div

So when it is expanded the HTML changes to look something like :

<div class="accordion-heading ">
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" target="_self" href="#item-name">
        <b class=""> Items ({{vm.selectedItems.length}})</b>
        <i class='fa fa-chevron-up'></i>
    </a>
</div>

What I want is based on some condition if the chevron-up class is applied, I want to remove the same and apply chevron-down class.

var element = document.getElementsByClassName("fa fa-chevron-up")[0];
element.classList.remove("fa-chevron-up").add("fa-chevron-down");

But this does not function properly. Because once we remove the class it says can not add class to undefined.

How to achieve the same?

PeterMader · Accepted Answer · 2017-06-13 14:53:49Z

3

Element.classList.remove does not return the class list, so you can't do method chaining. You have to do it like this:

var element = document.getElementsByClassName("fa fa-chevron-up")[0];
element.classList.remove("fa-chevron-up");
element.classList.add("fa-chevron-down");

answered Jun 13, 2017 at 14:53

PeterMader

7,3352 gold badges24 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Modify an element's class inside another element in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related