JavaScript를 사용하여 요소에서 CSS 클래스 제거 (jQuery 없음)

JavaScript를 사용하여 요소에서 CSS 클래스 제거 (jQuery 없음) [중복]

---

이 질문에 이미 답변이 있습니다.

• JavaScript로 요소의 클래스를 변경하는 방법은 무엇입니까? 30 답변

누구든지 JavaScript 만 사용하여 요소에서 클래스를 제거하는 방법을 알려줄 수 있습니까? 사용할 수 없으며 그것에 대해 아무것도 모르기 때문에 jQuery로 대답하지 마십시오.

---

이를 수행하는 올바른 표준 방법은 classList. 현재 대부분의 최신 브라우저의 최신 버전에서 널리 지원됩니다 .

ELEMENT.classList.remove("CLASS_NAME");

문서 : https://developer.mozilla.org/en/DOM/element.classList

---

document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

여기서는 MyID요소의 ID이고 MyClass는 제거 할 클래스의 이름입니다.

---

업데이트 : "My-Class"와 같은 대시 문자가 포함 된 클래스 이름을 지원하려면

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');

---

이 기능을 모든 DOM 요소에 적용하는 방법은 다음과 같습니다.

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}

---

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

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

---

div.classList.add("foo");
div.classList.remove("foo");

https://developer.mozilla.org/en-US/docs/Web/API/element.classList 에서 자세히 알아 보기

---

편집하다

좋아, 완전히 다시 작성하십시오. 한동안 배웠고 댓글이 도움이되었습니다.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < this.className.indexOf(className));
    }
};

Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};

---

Old Post

---

나는 방금 이런 일을하고 있었다. 여기 내가 생각해 낸 해결책이 있습니다 ...

// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
    Object.defineProperty(String.prototype,'trim', {
        value: function() {
            return this.replace(/^\s+|\s+$/g,'');
        },
        writable:false,
        enumerable:false,
        configurable:false
    });
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
    value: function(c) {
        if(this.className.indexOf(c)<0) {
            this.className=this.className+=' '+c;
        }
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double 
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
    value: function(c) {
        this.className=this.className.replace(c,'').replace('  ',' ').trim();
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});

이제 전화 할 수 있습니다. myElement.removeClass('myClass')

또는 연결 : myElement.removeClass("oldClass").addClass("newClass");

---

아주 간단하다고 생각합니다.

document.getElementById("whatever").classList.remove("className");

---

시험:

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}

---

var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');

---

이 모든 대답은 너무 복잡합니다.

var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');

결과는 문자열의 반환입니다.

Hello

아주 쉽습니다. 크레딧은 jondavidjohn으로 이동 합니다. 자바 스크립트에서 문자열 부분을 제거합니다.

---

이 JS 스 니펫 코드를 사용합니다.

First of all, I reach all the classes then according to index of my target class, I set className = "".

Target = document.getElementsByClassName("yourClass")[1];
Target.className="";

---

There is also $.toggleClass, $.addClass, and $.removeClass. For documentation, take a look at http://api.jquery.com/toggleClass/.

Take a look at this jsFiddle example to see it in action.

---

document.getElementById("whatever").className += "classToKeep";

With the plus sign ('+') appending the class as opposed to overwriting any existing classes

참고URL : https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery