How can I remove an element's class without ID selector - with vanilla JavaScript (no jquery)?

Question

First of all I've to say that I'd like to use this code in "tampermonkey";
There is a code like this:

<div class="tab-pane fade show active" id="tab-content-download" role="tabpanel" aria-labelledby="tab-download">
   <div class="d-none d-js-block">
       <p>...some text...</p>
   </div>
</div>

(I also have to mention that I have disabled Chrome Javascript in this site.)
1. Is it possible to use tampermonkey when chrome javascript is disabled?

2.How Can I remove " d-none " class only?

Answer 1

You can find all the elements by class, select the first one (in this example), go to his parent and remove the element you found

Note: getElementsByClassName returns an array of elements, even if only 1 element was found.

 var el = document.getElementsByClassName("d-none")[0]; el.parentElement.remove(el); 

 <div class="tab-pane fade show active" id="tab-content-download" role="tabpanel" aria-labelledby="tab-download"> <div class="d-none d-js-block"> <p>...some text...</p> </div> </div> 

If you want to remove the class and not the element:

 var el = document.getElementsByClassName("d-none")[0]; el.classList.remove("d-none"); 

 <div class="tab-pane fade show active" id="tab-content-download" role="tabpanel" aria-labelledby="tab-download"> <div class="d-none d-js-block"> <p>...some text...</p> </div> </div> 

Answer 2

• getElementsByClassName Find the first instance of class.
• Remove element using DOM element classList .

 document.getElementsByClassName("d-none")[0].classList.remove("d-none"); 

 <div class="tab-pane fade show active" id="tab-content-download" role="tabpanel" aria-labelledby="tab-download"> <div class="d-none d-js-block"> <p>...some text...</p> </div> </div>