Get elements by class name and change class name

Question

I have the following:

<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>

I need a JavaScript code to look for all elements with that class, and remove the "elementor-active". So the code, after the JavaScript runs on page load, should look like this:

<div id="elementor-tab-title-1141" class="elementor-tab-title"> 
         ...some stuff... 
</div>

Here is what I tried:

function changeClass()
{
    var classNameArray= document.getElementsByClassName("elementor-tab-title elementor-active");

    for(var i = (classNameArray.length - 1); i >= 0; i--)
    {
        classNameArray[i].innerHTML = 
        getClassName(classNameArray[i].innerHTML);
        classNameArray[i].className = "elementor-tab-title";
    }
}

Thanks!

[Don't use `.getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474).... ever. — Scott Marcus, Mar 19 '19 at 00:49

Mamun · Answer 1 · 2019-03-19T00:53:26.727

You can use querySelectorAll() to target all the elements, then loop through them to remove class using classList.remove() from the element:

var elList = [].slice.call(document.querySelectorAll('.elementor-tab-title'));
elList.forEach(function(el){
  el.classList.remove('elementor-active');
});

.elementor-tab-title{
  color: green;
}
.elementor-active{
  color: red;
}

<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>
<div id="elementor-tab-title-1142" class="elementor-tab-title elementor-active"> 
     ...some stuff2... 
</div>
<div id="elementor-tab-title-1143" class="elementor-tab-title elementor-active"> 
     ...some stuff3... 
</div>

`.forEach()` is not supported on node lists in all browsers. You should convert the node list returned by `.querySelectorAll()` to an `Array` before calling `.forEach()`. — Scott Marcus, Mar 19 '19 at 00:48

Maheer Ali · Accepted Answer · 2019-03-19T01:03:48.147

Follow the below steps

Use querySelectorAll() to get all the elements with that class
Then use forEach() loop on all the elements
Use classList.remove() to remove that particular class

[...document.querySelectorAll('elementor-tab-title,.elementor-active')].forEach(x => x.classList.remove('elementor-active'))
console.log(document.body.innerHTML)

<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>

Using jQuery

You can do that bit easier using jQuery removeClass()

$('.elementor-tab-title').removeClass('elementor-active');
console.log(document.body.innerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>

`.forEach()` is not supported on node lists in all browsers. You should convert the node list returned by `.querySelectorAll()` to an `Array` before calling `.forEach()`. — Scott Marcus, Mar 19 '19 at 00:48

Get elements by class name and change class name

2 Answers2