Phương thức removeAttribute() trong JavaScript

• Bùi Tấn Lực
• 920
• 14/09/2025

Chức năng của Phương thức removeAttribute() trong JavaScript

Phương thức removeAttribute() trong JavaScript dùng để xóa thuộc tính của phần tử HTML và cả giá trị của thuộc tính đó, nếu thuộc tính xóa không tồn tại thì cũng không xảy ra lỗi.

Cú pháp của Phương thức removeAttribute() trong JavaScript

tenbien.removeAttribute("thuoctinh"); 

tenbien: Tên biến là phần tử HTML, thường dùng document.getElementById("giá trị id") để lấy.

thuoctinh: Thuộc tính cần xóa trên phần tử HTML đó (Ví dụ: href, id,.....)

Code Phương thức removeAttribute() trong JavaScript

Phương thức removeAttribute() href trong JavaScript

Xóa href của thẻ a và cả giá trị của href đó:

document.getElementById("aid").removeAttribute("href"); 

<a id="aid" href="https://webmoi.vn/phuong-thuc-removeattribute-href-trong-javascript/" >Phương thức removeAttribute() href trong JavaScript</a>
<p>Click vào nút XÓA HREF để xóa thuộc tính href và cả giá trị của nó</p>
<button onclick="xoaHref()">XÓA HREF</button>
<script>
function xoaHref() {
 document.getElementById("aid").removeAttribute("href"); 
}
</script>

Chạy Thử

Phương thức removeAttribute() id trong JavaScript

Xóa thuộc tính id và cả giá trị của id đó, những css liên quan đến id đó sẽ biến mất:

<div id="divid">ID có màu đỏ</div>
<p>Click vào nút XÓA ID để xóa thuộc tính id và cả giá trị của nó, khi xóa id thì css bằng id sẽ không còn và màu đỏ sẽ mất</p>
<button onclick="xoaId()">XÓA ID</button>
<script>
function xoaId() {
 document.getElementById("divid").removeAttribute("id"); 
}
</script>

Chạy Thử

Khi Nào Nên Sử Dụng removeAttribute() Trong JavaScript?

removeAttribute() phù hợp khi cần loại bỏ một thuộc tính khỏi phần tử HTML trong quá trình xử lý DOM. Phương thức này đặc biệt hữu ích khi giao diện thay đổi theo trạng thái, khi một thuộc tính không còn cần thiết hoặc khi muốn làm sạch cấu trúc phần tử sau một thao tác JavaScript.

Điểm cần lưu ý là phương thức chỉ xóa thuộc tính được chỉ định khỏi phần tử, không xóa phần tử và cũng không làm thay đổi trực tiếp nội dung bên trong phần tử đó.

Loại bỏ thuộc tính khi trạng thái phần tử thay đổi

Trong giao diện tương tác, một phần tử có thể được gắn thuộc tính để biểu thị trạng thái hiện tại. Khi trạng thái thay đổi, JavaScript có thể loại bỏ thuộc tính đó để đưa phần tử về trạng thái phù hợp.

Chẳng hạn, một nút được vô hiệu hóa trong thời gian chờ xử lý. Sau khi công việc hoàn tất, có thể xóa thuộc tính disabled để người dùng tiếp tục thao tác:

const button = document.querySelector("#submitButton");

button.removeAttribute("disabled");

Cách này giúp trạng thái của phần tử được cập nhật trực tiếp trên DOM và tránh giữ lại thuộc tính không còn phù hợp.

Xóa thuộc tính không cần thiết sau khi xử lý DOM

Trong một số thao tác DOM, JavaScript có thể tạm thời thêm thuộc tính vào phần tử để phục vụ một bước xử lý. Khi công việc hoàn tất, thuộc tính đó có thể được loại bỏ để cấu trúc HTML trở nên gọn và đúng với trạng thái thực tế.

Ví dụ, một thuộc tính tùy chỉnh được sử dụng để đánh dấu phần tử đã được xử lý:

const item = document.querySelector(".item");

item.removeAttribute("data-processing");

Việc loại bỏ thuộc tính sau khi hoàn thành giúp tránh tình trạng DOM vẫn mang thông tin trạng thái cũ, từ đó hạn chế việc các đoạn JavaScript khác hiểu sai trạng thái của phần tử.

Kết hợp removeAttribute() với hasAttribute() để kiểm tra trước khi xóa

Khi không chắc thuộc tính có tồn tại hay không, có thể dùng hasAttribute() để kiểm tra trước. Cách này giúp đoạn mã thể hiện rõ ý định và phù hợp với những trường hợp chỉ muốn thực hiện thao tác xóa khi thuộc tính thực sự có mặt.

const element = document.querySelector("#menu");

if (element.hasAttribute("data-active")) {
    element.removeAttribute("data-active");
}

Cách kết hợp này đặc biệt hữu ích khi xử lý các phần tử được tạo hoặc thay đổi động. JavaScript có thể kiểm tra trạng thái hiện tại của DOM rồi mới thực hiện thao tác cần thiết, thay vì giả định thuộc tính luôn tồn tại.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức removeAttribute() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức removeAttribute() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp