JavaScript / removeAttribute()로 HTML 속성 제거하기

element.removeAttribute(name)은 지정한 HTML 속성을 요소에서 제거합니다. 예를 들어 버튼의 disabled 속성을 없애면 버튼을 다시 사용할 수 있습니다. 속성이 이미 없어도 오류 없이 끝나며 반환값은 undefined입니다.

속성 제거와 존재 여부 확인

요소를 선택한 뒤 속성 이름을 문자열로 전달합니다. hasAttribute()는 속성이 있는지 true 또는 false로 알려 주므로 제거 전후를 확인하기 좋습니다.

const button = document.querySelector('#save');
console.log(button.hasAttribute('disabled')); // 원래 disabled가 있으면 true
button.removeAttribute('disabled');
console.log(button.hasAttribute('disabled')); // false

속성이 없는 요소에 다시 removeAttribute()를 호출해도 예외는 나지 않습니다. 속성을 되돌리려면 원래 값에 맞게 setAttribute()를 호출하세요. MDN의 removeAttribute() 문서에서 반환값과 누락된 속성의 처리를 확인할 수 있습니다.

값을 비우는 것과 제거하는 것은 다릅니다

disabled는 불리언 속성으로, HTML에 존재하는지만으로 버튼을 비활성화합니다. 따라서 setAttribute("disabled", "false")나 setAttribute("disabled", "")도 속성을 남겨 두므로 버튼이 비활성화됩니다. 활성화하려면 removeAttribute("disabled")를 사용합니다.

button.setAttribute('disabled', 'false');
console.log(button.disabled); // true
button.removeAttribute('disabled');
console.log(button.disabled); // false

일반 텍스트 속성은 값을 바꾸는 것과 속성 자체를 없애는 것이 서로 다른 의미입니다. 특정 속성이 존재하는지 판단해야 한다면 값 문자열보다 hasAttribute()를 확인하세요. MDN의 hasAttribute() 문서를 참고할 수 있습니다.

전체 예제: 버튼 활성화와 되돌리기

아래 코드를 remove-attribute.html로 저장하고 브라우저에서 엽니다. 처음에는 대상 버튼이 비활성화되어 있습니다. “disabled 제거”를 누르면 속성이 사라지고 버튼이 활성화되며, “disabled 복원”을 누르면 다시 비활성화됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>disabled 속성 제거 실습</title>
</head>
<body>
<button id="target" type="button" disabled>대상 버튼</button>
<button id="enable" type="button">disabled 제거</button>
<button id="disable" type="button">disabled 복원</button>
<p id="status" aria-live="polite"></p>
<script>
const target = document.querySelector('#target');
const status = document.querySelector('#status');

function show() {
  status.textContent = target.hasAttribute('disabled')
    ? '대상 버튼: 비활성화' : '대상 버튼: 사용 가능';
}

document.querySelector('#enable').addEventListener('click', () => {
  target.removeAttribute('disabled');
  show();
});
document.querySelector('#disable').addEventListener('click', () => {
  target.setAttribute('disabled', '');
  show();
});
show();
</script>
</body>
</html>

상태 문구는 hasAttribute()의 결과를 사용하므로 개발자 도구의 요소 탭에서 속성 유무를 확인하며 비교할 수 있습니다. 제거 버튼을 두 번 눌러도 오류가 나지 않습니다. 실제 폼에서 버튼을 활성화할 때는 입력값 검증 조건을 먼저 확인하고 그 조건이 충족된 경우에만 속성을 제거하세요.