자바스크립트 removeAttribute() 함수 – 요소에서 지정한 속성 제거하기

`Element.removeAttribute()` 사용법

removeAttribute() 함수는
DOM 요소에서 매개변수로 지정하는 속성을 제거하는 함수입니다.
매개변수가 없으면 오류를 발생시키지만, 매개변수로 지정하는 속성이 요소에 없어도 오류 없이 아무 동작도 하지 않습니다.

DOM 요소에서 속성을 추가하려면 setAttribute() 함수를 사용하세요.

구문

매개변수

removeAttribute() 함수의 매개변수
`attributeName`	필수. 요소에서 제거하려는 속성의 이름(문자열 형식)입니다. 대소문자를 구분하지 않습니다.

매개변수는 필수이므로 매개변수가 없으면 오류를 발생시키지만,
매개변수로 지정하는 속성이 요소에 없어도 오류 없이 아무 동작도 하지 않습니다.

반환 값

없습니다. 즉, undefined를 반환합니다.

예제

다음은 "배경색 지우기" 버튼을 클릭하면,
<p> 요소의 class 속성이 제거되는 예제입니다.

HTML

<style>
    .bg {
        background-color: yellowgreen;
    }
</style>
<p class="bg">배경색을 지워보세요.</p>
<button type="button">배경색 지우기</button>

<p> 요소의 class 속성이 제거되면, class 속성의 bg 값도 같이 제거되므로 .bg로 지정한 배경색 스타일도 함께 제거됩니다.

JavaScript

const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       p 요소의 class 속성이 제거됩니다. */
    elem.removeAttribute("class");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.