jQuery / Reference / .removeAttr()

.removeAttr()는 선택한 모든 요소에서 지정한 HTML 속성을 삭제합니다. 값을 빈 문자열로 설정하는 것과는 다르며, 여러 속성은 공백으로 구분해 한 번에 제거할 수 있습니다.

문법과 적용 범위

$("#name").removeAttr("placeholder");
$("#name").removeAttr("placeholder title");

속성 이름을 문자열로 전달하며 반환값은 원래 jQuery 객체입니다. 없는 속성을 제거해도 오류가 나지 않습니다. placeholder처럼 표시 안내에 관한 속성은 지우면 안내가 없어지지만, 실제 입력값까지 지우는 것은 아닙니다. 속성 이름 앞에 점이나 #을 붙이지 않습니다.

jQuery 공식 문서의 .removeAttr() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery removeAttr 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<label for="name">이름</label>
<input id="name" type="text" placeholder="예: 홍길동" title="이름 안내">
<button id="remove" type="button">안내 속성 제거</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#remove").on("click", function () {
        $("#name").removeAttr("placeholder title");
        $("#output").text("placeholder 존재: " + document.getElementById("name").hasAttribute("placeholder") +
          " / 현재 값: " + $("#name").val());
      });
    });
  </script>
</body>
</html>

실행 결과 확인

이름을 입력한 다음 버튼을 눌러 보세요. placeholder와 title은 없어지고 결과에 placeholder 존재: false가 표시되지만 입력한 이름은 유지됩니다. 새로고침하면 원래 두 속성이 복원됩니다.

빈 문자열과 속성 삭제 비교

$("#name").attr("placeholder", "");
console.log(document.getElementById("name").hasAttribute("placeholder")); // true
$("#name").removeAttr("placeholder");
console.log(document.getElementById("name").hasAttribute("placeholder")); // false

두 경우 모두 안내 문구는 보이지 않지만 DOM의 속성 존재 여부는 다릅니다. 속성 선택자 [placeholder]를 쓰는 CSS나 스크립트에서도 이 차이가 나타납니다.

사용할 때 주의할 점

• disabled나 checked 같은 상태를 바꾸려는 목적이라면 .prop("disabled", false), .prop("checked", false)처럼 현재 DOM 프로퍼티를 직접 설정하세요. 속성 삭제와 현재 상태 변경을 같은 의미로 처리하지 않습니다.
• ARIA 속성을 제거하면 보조 기술에 전달되던 의미도 사라질 수 있습니다. aria-expanded의 접힘 상태를 알리려면 삭제보다 .attr("aria-expanded", "false")가 적합합니다.
• onclick 속성 삭제는 .on()으로 등록한 핸들러를 제거하는 기능이 아닙니다. jQuery 이벤트 핸들러는 등록 방식에 맞춰 .off()로 관리하세요.

용도를 비교하려면 .attr()로 속성 설정하기, .val()로 입력값 변경하기을 참고하세요.