라이브러리
[JAVASCRIPT] element.classList.remove(className) - 클래스 제거
element.classList.remove(className)
`element.classList.remove(className)`은 HTML 요소의 클래스 목록에서 지정된 클래스를 제거하는 메서드입니다. 이 메서드는 `classList` 속성을 사용하여 클래스 목록을 관리합니다.
# Syntax
#hostingforum.kr
javascript
element.classList.remove(className)
# Parameters
* `className`: 제거할 클래스 이름
# 예제
#hostingforum.kr
html
Hello World!
const myDiv = document.getElementById('myDiv');
// 클래스 목록을 출력합니다.
console.log(myDiv.classList); // ["container", "red", "blue"]
// 클래스 "red"를 제거합니다.
myDiv.classList.remove('red');
// 클래스 목록을 다시 출력합니다.
console.log(myDiv.classList); // ["container", "blue"]
# 사용 예제
#hostingforum.kr
javascript
// HTML
Click Me!
// JavaScript
const myButton = document.getElementById('myButton');
// 버튼을 클릭했을 때 클래스 "btn-primary"를 제거하고 클래스 "btn-secondary"를 추가합니다.
myButton.addEventListener('click', () => {
myButton.classList.remove('btn-primary');
myButton.classList.add('btn-secondary');
});
// 버튼을 클릭합니다.
myButton.click();
# 결과
클릭한 버튼의 클래스 목록은 `["btn", "btn-secondary"]`가 됩니다.
# 참고
* `classList` 속성은 HTML 요소의 클래스 목록을 관리하는 속성입니다.
* `classList.remove()` 메서드는 지정된 클래스를 제거합니다.
* `classList.add()` 메서드는 지정된 클래스를 추가합니다.
* `classList.toggle()` 메서드는 지정된 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다.
댓글목록
등록된 댓글이 없습니다.
