如何在javascript中移除標籤子類的類別

Question

如何移除活動類。下面是我的代碼，第一個我覺得ID標籤，則class但是這個代碼不工作：

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>

Answer 1

試試這個片斷

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>

Answer 2

如果我理解正確的話，你想刪除第二<figure>的ID。您可以使用JS方法removeAttribute()。它使您能夠從元素標籤中刪除任何屬性。

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>

Answer 3

，你可以嘗試使用classList.remove（）圖形元素上功能

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


    figureEl.className.remove(remove_class); 
} 

我希望它能起作用。