How to remove class of a tag child in javascript

Question

How do I remove class active. Below is my code, first I find id tag then class but this code is not working:

function myFunction() {
  var element1 = document.getElementById('grid3d');
  var remove_class = 'active';

  element1.className = element1.className.replace(' ' + remove_class, '').replace(remove_class, '');
}

.active {
  color: red;
}

<div id="grid3d">Hello World

  <figure ">Click the button to remove the class attribute from the h1 element.</figure>
    
    <figure class="active ">Click the button to remove the class attribute from the h1 element.</figure>
    
    <figure>Click the button to remove the class attribute from the h1 element.</figure>
    </div>
    <button onclick="myFunction() ">Try it</button>

use jquery it has just two line code //ex $("element1").removeClass("active"); — Vishnu Bhadoriya, Aug 13 '16 at 10:12
that we not able to add this is a plugin and we want to remove active class from all figure tags do you have any idea how it works ? — Rohit Taur, Aug 13 '16 at 10:17
that I have done but it works only at which class and ID is on same tag and in my case id is on parent and class is in child tag — Rohit Taur, Aug 13 '16 at 10:19
Possible duplicate of [Remove CSS class from element with JavaScript (no jQuery)](http://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery) — caramba, Aug 13 '16 at 10:31
@caramba First I saw all those answers but those all solution has not work that's the reason I posted this question — Rohit Taur, Aug 13 '16 at 10:36

score 3 · Accepted Answer · edited Aug 13 '16 at 11:48

3

Try this snippet

function myFunction() {
  var fig = document.querySelectorAll('figure');

  for (var i = 0; i < fig.length; i++) {
    if (fig[i].className == "active") {
      fig[i].className = "";
    }
  }

}

.active {
  color: purple;  
}

<div id="grid3d">Hello World

  <figure>Click the button to remove the class attribute from the h1 element.</figure>

  <figure class="active">Click the button to remove the class attribute from the h1 element.</figure>

  <figure>Click the button to remove the class attribute from the h1 element.</figure>
</div>
<button onclick="myFunction()">Try it</button>

edited Aug 13 '16 at 11:48

Ivan

34,531
8
55
100

answered Aug 13 '16 at 10:23

cheralathan

572
5
14

Great this works I like this code testing it with my all conditions – Rohit Taur Aug 13 '16 at 10:29
I have one more question to you how we can get current child of figure tag which has active class – Rohit Taur Aug 13 '16 at 10:33
use this if you have only one child element `fig[i].children[0].className` – cheralathan Aug 13 '16 at 11:45
First, check the length of children. and then use the above code. – cheralathan Aug 13 '16 at 11:47

score 1 · Answer 2 · answered Aug 13 '16 at 10:27

1

you can try use classList.remove() function on figure element

function myFunction() {
  var element1 = document.getElementById('grid3d'),
      remove_class = 'active',
      figureEl = element1.querySelector('.' + remove_class);


  figureEl.className.remove(remove_class);
}

I hope it will works.

answered Aug 13 '16 at 10:27

legendemil

146
4

I have one more question to you how we can get current child of figure tag which has active class – – Rohit Taur Aug 13 '16 at 10:33
In the similar way like this: el.querySelector('figure.active'); // where el can be a figure element – legendemil Aug 13 '16 at 11:02

score 0 · Answer 3 · answered Aug 13 '16 at 10:23

If I understand correctly you would like to remove the id of the second <figure>. You can use the JS method removeAttribute(). It enables you to remove any attribute from a element tag.

var removeClass = function(selector) {
  var el = document.querySelector(selector);
  el.removeAttribute('id');
}

#active {
  color: red;
}

<div>Remove #active! from the second figure tag

  <figure>Click the button to remove the class attribute from the h1 element.</figure>

  <figure id="active">Click the button to remove the class attribute from the h1 element.</figure>

  <figure>Click the button to remove the class attribute from the h1 element.</figure>
</div>
<button onclick="removeClass('#active')">Try it</button>

You have completely change my condition as I mention this is a plugin any other to fix this with my same code — Rohit Taur, Aug 13 '16 at 10:25
You need to work a little instead of asking for code correction. Do you want to delete a specific element or all elements that have .active? — Ivan, Aug 13 '16 at 10:26

How to remove class of a tag child in javascript

3 Answers3