자바스크립트 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 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.