How to Add and Remove Classes in JavaScript Without Jquery

How to add and remove classes in Javascript without jQuery

The following 3 functions work in browsers which don't support classList:

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

https://jaketrent.com/post/addremove-classes-raw-javascript/

Add and remove classes in javascript without jquery

Your code is good, just have a little logical problem :)

var p = document.querySelectorAll("p");for( var i = 0; i < p.length; i++ ){ p[i].addEventListener("click", makeRed); p[0].classList.add("active");}
function makeRed(){ if( this.classList.contains("active")){  this.classList.remove("active");    } else{        for( var i = 0; i < p.length; i++ ){            p[i].classList.remove("active");        }      this.classList.add("active");    }    }

 .active{    color: red;  }

<p class="active">Text First</p><p>Text Second</p><p>Text Third</p>

How to remove class from siblings of an element without JQuery?

You can use loop inside click event to remove active class from all elements and then again set it on clicked element.

var el = document.querySelectorAll('.controllers span');for (let i = 0; i < el.length; i++) {  el[i].onclick = function() {    var c = 0;    while (c < el.length) {      el[c++].className = 'slide';    }    el[i].className = 'slide active';  };}

.active {  color: red;}

<div class="controllers">  <span id='one' class='active'>Lorem</span>  <span id='two'>Lorem</span>  <span id='three'>Lorem</span></div>

Angular add and remove classes triggered by method without jquery

For Angular instead of angularjs, try:

app.component.html

<button (click)="toggleMethod()">Toggle Classes</button>  
<div class="myDiv" [class]="{'animate__animated': toggle, 'animate__fadeInLeft': toggle}">
    // Stuff here
</div>

app.component.ts

toggle: boolean = false;

toggleMethod() {
    this.toggle = !this.toggle;      
}

Remove specific class from group of elements without jquery

Remove . from the classname

el.classList.remove("activeLang");

window.onload = function() {
  var x = document.getElementsByClassName("activeLang");  console.log(x[0]); //will print the object  [].forEach.call(x, function(el) {    el.classList.remove("activeLang");  });  console.log(x[0]); //will no longer print the object};

<div class="header_content_lang">  <span class="langNav">        ...    </span>  <span class="langNav">        ...    </span>  <span class="langNav activeLang">        ...    </span></div>

Remove CSS class from element with JavaScript (no jQuery)

The right and standard way to do it is using classList. It is now widely supported in the latest version of most modern browsers:

ELEMENT.classList.remove("CLASS_NAME");

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

.red {
  background: red
}

<div id='el' class="red"> Test</div>
<button id='remove'>Remove Class</button>

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

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>

Remove next div with JavaScript, without jquery

Use querySelector with css adjacent sibling or next-sibling selector.

var ele = document.querySelector('.test + *')
ele.remove();
// or for older browser// ele.parentNode.removeChild(ele)// or// document.body.removeChild(ele)

<body class='home'>  <nav class='test'></nav>  <div>Want to remove this elements</div></body>

---

Related Topics