[Dseok의 코딩스터디] javascript removeAttribute() 메서드 개념 한방에 끝내기 | 개념 & 실제 활용 예제 10가지

https://coding-studing.tistory.com/37

위 포스팅에서 removeAttribute()에 대해서 언급한 적이 있습니다.

그래서 오늘은 removeAttrubute()에 대해 다양한 예제를 통해 알아보고자 합니다.

📌 removeAttribute()란?

removeAttribute() 메서드는 HTML 요소의 특정 속성을 제거하는 JavaScript의 내장 메서드입니다.
즉, <div id="box" style="color: red;">처럼 특정 속성을 가진 요소에서 원하는 속성(예: style, id, class 등)을 제거할 수 있습니다.

✅ 기본 문법

 element.removeAttribute("속성이름");

• element : 속성을 제거할 대상 요소
• "속성이름" : 삭제할 속성의 이름

📌 .removeAttribute() 실용 예제 10가지

1️⃣ 버튼 클릭 시 특정 요소의 style 속성 제거

<button id="resetStyle">스타일 제거</button>
<p id="text" style="color: red; font-size: 20px;">안녕하세요!</p>

<script>
document.getElementById("resetStyle").addEventListener("click", function() {
    document.getElementById("text").removeAttribute("style");
});
</script>

✅ 설명: 버튼 클릭 시 <p> 요소의 style 속성이 제거되어 CSS 스타일이 초기화됨.

 

2️⃣ 모든 리스트 요소의 style 속성 제거

<ul>
  <li style="color: red;">아이템 1</li>
  <li style="color: green;">아이템 2</li>
  <li style="color: blue;">아이템 3</li>
</ul>
<button id="removeAll">모든 스타일 제거</button>

<script>
document.getElementById("removeAll").addEventListener("click", function() {
    document.querySelectorAll("li").forEach(function(el) {
        el.removeAttribute("style");
    });
});
</script>

✅ 설명: 모든 <li> 요소의 인라인 스타일을 제거합니다.

 

3️⃣ 특정 data- 속성 제거

<div id="box" data-role="admin" style="color: red;">관리자 패널</div>
<button onclick="removeDataRole()">데이터 속성 제거</button>

<script>
function removeDataRole() {
    document.getElementById("box").removeAttribute("data-role");
}
</script>

✅ 설명: data-role 속성을 삭제하여 데이터 속성 기반 제어를 해제합니다.

 

4️⃣ 폼 필드의 disabled 속성 제거

<input type="text" id="name" disabled>
<button onclick="enableInput()">입력 활성화</button>

<script>
function enableInput() {
    document.getElementById("name").removeAttribute("disabled");
}
</script>

✅ 설명: 버튼 클릭 시 disabled 속성을 제거하여 입력 필드를 활성화합니다.

 

5️⃣ 링크의 target="_blank" 속성 제거

외부 사이트
새 창 열기 제거
function removeTarget() {
    document.getElementById("link").removeAttribute("target");
}

✅ 설명: 버튼 클릭 시 target="_blank" 속성을 제거하여 새 창 열기 방지.

 

6️⃣ checked 속성 제거 (체크박스 해제)

<input type="checkbox" id="agree" checked> 동의합니다
<button onclick="removeCheck()">체크 해제</button>

<script>
function removeCheck() {
    document.getElementById("agree").removeAttribute("checked");
}
</script>

✅ 설명: 버튼 클릭 시 checked 속성을 제거하여 체크박스를 해제합니다.

 

7️⃣ 특정 요소에서 class 속성 제거

<div id="content" class="highlight">여기에 클래스가 있음</div>
<button onclick="removeClass()">클래스 제거</button>

<script>
function removeClass() {
    document.getElementById("content").removeAttribute("class");
}
</script>

✅ 설명: 버튼 클릭 시 class 속성이 제거되어 CSS 스타일이 적용되지 않음.

 

8️⃣ 모든 버튼의 disabled 속성 제거

<button disabled>버튼 1</button>
<button disabled>버튼 2</button>
<button onclick="enableAllButtons()">모든 버튼 활성화</button>

<script>
function enableAllButtons() {
    document.querySelectorAll("button[disabled]").forEach(function(btn) {
        btn.removeAttribute("disabled");
    });
}
</script>

✅ 설명: 버튼 클릭 시 모든 비활성화된 버튼을 활성화합니다.

 

9️⃣ 특정 태그에서 alt 속성 제거

<img src="image.jpg" alt="이미지 설명" id="img">
<button onclick="removeAlt()">Alt 속성 제거</button>

<script>
function removeAlt() {
    document.getElementById("img").removeAttribute("alt");
}
</script>

✅ 설명: 버튼 클릭 시 이미지의 alt 속성을 제거합니다.

 

🔟 특정 조건을 만족하는 요소의 속성 제거

<input type="text" id="email" value="test@example.com" readonly>
<button onclick="removeReadonly()">읽기 전용 해제</button>

<script>
function removeReadonly() {
    let input = document.getElementById("email");
    if (input.value.includes("@")) {
        input.removeAttribute("readonly");
    }
}
</script>

✅ 설명: 이메일 형식이 맞을 경우 readonly 속성을 제거하여 입력을 허용합니다.

 

📌 마무리 🎯

• removeAttribute()는 HTML 요소의 특정 속성을 삭제할 때 유용한 메서드
• 스타일 제거, 폼 필드 활성화, 데이터 속성 조작 등 다양한 활용 가능
• 반복문과 조건문을 활용하면 동적으로 속성을 제어할 수 있음

🚀 이제 JavaScript로 속성을 자유롭게 조작해보세요!