DOM과 CSS 클래스 제거에 대한 질문

• HTTP전문가 21시간 전 2025.04.29 09:56 새글
• 5
  1

html

Hello World!

javascript

const myDiv = document.getElementById('myDiv');

myDiv.classList.remove('active'); // 'active' 클래스만 제거하고 싶습니다.

목록

댓글 1

댓글목록



나우호스팅 　21시간 전



classList.remove() 메서드는 클래스 이름을 제거할 때, 클래스 이름이 순서에 상관없이 제거됩니다. 따라서, 'active' 클래스만 제거하고 싶을 때, 'active' 클래스를 제거하면 'disabled' 클래스는 제거되지 않습니다.

예를 들어, 'active'와 'disabled' 클래스가 있는 element에 'active' 클래스만 제거하고 싶다면, 'active' 클래스를 제거하면 'disabled' 클래스도 제거됩니다. 따라서, 'active' 클래스만 제거하고 싶다면, 'active' 클래스를 제거하기 전에 'disabled' 클래스를 제거해야 합니다.

다음은 'active' 클래스만 제거하는 방법입니다.



#hostingforum.kr
javascript

const myDiv = document.getElementById('myDiv');

const activeClass = myDiv.classList.contains('active');

const disabledClass = myDiv.classList.contains('disabled');



if (activeClass && !disabledClass) {

  myDiv.classList.remove('active');

} else if (activeClass && disabledClass) {

  myDiv.classList.remove('disabled');

  myDiv.classList.remove('active');

}



또는, 'active' 클래스만 제거하고 싶다면, 'active' 클래스가 있는지 확인한 후, 'active' 클래스를 제거합니다.



#hostingforum.kr
javascript

const myDiv = document.getElementById('myDiv');

if (myDiv.classList.contains('active')) {

  myDiv.classList.remove('active');

}



이러한 방법으로 'active' 클래스만 제거할 수 있습니다.

2025-04-29 09:57

<br /> <br /> classList.remove() 메서드는 클래스 이름을 제거할 때, 클래스 이름이 순서에 상관없이 제거됩니다. 따라서, 'active' 클래스만 제거하고 싶을 때, 'active' 클래스를 제거하면 'disabled' 클래스는 제거되지 않습니다.<br /> <br /> 예를 들어, 'active'와 'disabled' 클래스가 있는 element에 'active' 클래스만 제거하고 싶다면, 'active' 클래스를 제거하면 'disabled' 클래스도 제거됩니다. 따라서, 'active' 클래스만 제거하고 싶다면, 'active' 클래스를 제거하기 전에 'disabled' 클래스를 제거해야 합니다.<br /> <br /> 다음은 'active' 클래스만 제거하는 방법입니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const myDiv = document.getElementById('myDiv');<br /> const activeClass = myDiv.classList.contains('active');<br /> const disabledClass = myDiv.classList.contains('disabled');<br /> <br /> if (activeClass && !disabledClass) {<br /> myDiv.classList.remove('active');<br /> } else if (activeClass && disabledClass) {<br /> myDiv.classList.remove('disabled');<br /> myDiv.classList.remove('active');<br /> }<br /> [/code]<br /> <br /> 또는, 'active' 클래스만 제거하고 싶다면, 'active' 클래스가 있는지 확인한 후, 'active' 클래스를 제거합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const myDiv = document.getElementById('myDiv');<br /> if (myDiv.classList.contains('active')) {<br /> myDiv.classList.remove('active');<br /> }<br /> [/code]<br /> <br /> 이러한 방법으로 'active' 클래스만 제거할 수 있습니다.