js删除class元素(js对象删除指定元素)
怎么用js实现jq的removeClass方法
1、addClass:为指定的dom元素添加样式。
2、removeClass:删除指定dom元素的样式。
3、toggleClass:如果存在(不存在)，就删除(添加)一个样式。
4、hasClass:判断样式是否存在。
原生 JS 代码如下：
function?hasClass(obj,?cls)?{
????return?obj.className.match(new?RegExp('(\\s|^)'?+?cls?+?'(\\s|$)'));
}
function?addClass(obj,?cls)?{
????if?(!this.hasClass(obj,?cls))?{
????????obj.className?+=?"?"?+?cls;
????}
}
function?removeClass(obj,?cls)?{
????if?(hasClass(obj,?cls))?{
????????var?reg?=?new?RegExp('(\\s|^)'?+?cls?+?'(\\s|$)');
????????obj.className?=?obj.className.replace(reg,?'?');
????}
}
function?toggleClass(obj,cls){
????if(hasClass(obj,cls)){
????????removeClass(obj,?cls);
????}?else?{
????????addClass(obj,?cls);
????}
}
js通过class属性 删除节点
js通过class属性删除节点用法实现：
比如有test.html，div的结构如下：
div class="columns" id="columns"
div class="column"input type="checkbox" name="col_list[]" value="cows"cows/div
div class="column"input type="checkbox" name="col_list[]" value="cows"cows/div
div class="column"input type="checkbox" name="col_list[]" value="cows"cows/div
div class="column"input type="checkbox" name="col_list[]" value="cows"cows/div
div name="columnClear" class="contentClear" id="columnClear"/div
/div
可以通过class属性来删除指定的节点：
js常用方法：element.parentNode.removeChild(element);
或者直接定义删除的js方法：
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
这样只要传入class名，就可以删除这个class相关的子节点了。
如何通过class和id使用原生js删除元素
!--原生js删除元素的方法是removechild('xxx'),如果想点击自己，移除自己，那么就要找到它的父元素，父元素再用removechild('xxx')来移除自己，括号里就是自己 --
html
head
title/title
meta charset="utf-8" /
style
/style
/head
body
ul
lisdf /li
li收到 /li
lisd是对方是对f /li
li是对浮点数 /li
/ul
script
var allLi=document.querySelectorAll('li')
for(var a=0;aallLi.length;a++){
allLi[a].onclick=function(){
this.parentNode.removeChild(this)
}
}
/script
/body
/html
原生javascript 增加 删除 class
????//?dom?元素处理
????//?获取dom属性
????function?getAttr(?attr?)
????{
????????return?this.getAttribute(?attr?);
????}
????//?设置属性
????function?setAttr(?attr,?val?)
????{
????????this.setAttribute(?attr,?val?);
????????return?this;
????};
????//?编辑元素class
????function?editClass(?mode,?data?)
????{
????????var?cls?=?getAttr.call(?this,?"class"?)?||?'';
????????var?arr?=?cls.split(?/\s+/?);
????????switch(?mode?)
????????{
????????????case?"add":
????????????????return?setAttr.call(?this,?"class",?cls?+?"?"?+?data?);
????????????break;
????????????case?"remove":
????????????????for(?var?i?=?0;?i??arr.length;?i++?)
????????????????{
????????????????????if(?arr[?i?]?==?data?)
????????????????????{
????????????????????????arr.splice(?i,?1?);
????????????????????}
????????????????};
????????????????var?cls?=?arr.join(?"?"?);
????????????????cls?=?cls.replace(?/^\s|\s$/g,?""?);
????????????????//?cls?=?cls?==?""???null?:?cls;
????????????????return?setAttr.call(?this,?"class",?cls?);
????????????break;
????????????default:
????????????????console.log(?"EditClass?mode?error!"?);
????????????????return?this;
????????????break;
????????}
????}
????//?添加class
????function?addClass(?cls?)
????{
????????return?editClass.call(?this,?"add",?cls?);
????}
????//?删除class
????function?removeClass(?cls?)
????{
????????return?editClass.call(?this,?"remove",?cls?);
????}
????
????//?我写的这个调用起来和普通的调用方式不一样，?需要用call
????
????//?比如
????dom?=?document.getElementById('domid');
????addClass.call(dom,?'newclass');?//?给dom添加名为‘newclass’的classname
至于toggle没用过，不清楚是什么效果， 不过我想结合add和remove应该已经能做出所有效果了
如何用JavaScript删除指定class？
div?class="abc"点我删除/div
script
window.onload=function(){
???var?abc=document.getElementsByClassName("abc")[0];
???abc.onclick=function(){
??????this.parentNode.removeChild(this);
???}
}
/script
原生JS如何查询一个元素的class，增加一个class，删除一个class
document.getElementById("myDIV").className;
document.getElementById("myDIV").className.indexOf('firstClass')
或者
document.getElementById("myDIV").classList.contains('firstClass');
document.getElementById("myDIV").classList.add("firstClass");
document.getElementById("myDIV").classList.add("firstClass", "secondClass", "thirdClass");
document.getElementById("myDIV").classList.remove("firstClass");
document.getElementById("myDIV").classList.remove("firstClass", "secondClass", "thirdClass");