JavaScript removeAttribute

Summary: in this tutorial, you will learn how to use the JavaScript removeAttribute() to remove the attribute with the specified name from the element.

Introduction to JavaScript removeAttribute() method

The removeAttribute() removes an attribute with a specified name from an element:

element.removeAttribute(name);
Code language: CSS (css)

Parameters

The removeAttribute() accepts an argument which is the name of the attribute that you want to remove. If the attribute does not exist, the removeAttribute()  method wil not raise an error.

Return value

The removeAttribute() returns a value of undefined.

Usage notes

HTML elements have some attributes which are Boolean attributes. To set false to the Boolean attributes, you cannot simply use the setAttribute() method, but you have to remove the attribute entirely using the removeAttribute() method.

For example, the values of the disabled attributes are true in the following cases:

<button disabled>Save Draft</button>
<button disabled="">Save</button>
<button disabled="disabled">Cancel</button>
Code language: HTML, XML (xml)

Similarly, the values of the following readonly attributes are true:

<input type="text" readonly>
<textarea type="text" readonly="">
<textarea type="text" readonly="readonly">
Code language: HTML, XML (xml)

JavaScript removeAttribute() example

The following example uses the removeAttribute() method to remove the target attribute from the link element with the id js:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS removeAttribute() Demo</title>
</head>
<body>
    <a href="https://www.javascripttutorial.net" 
       target="_blank" 
       id="js">JavaScript Tutorial</a>

    <script>
        let link = document.querySelector('#js');
        if (link) {
            link.removeAttribute('target');
        }
    </script>
</body>
</html>
Code language: HTML, XML (xml)

How it works:

  • Select the link element with id js using the querySelector() method.
  • Remove the target attribute by calling the removeAttribute() on the selected link element.

Summary

  • Use the removeAttribute() to remove an attribute from a specified element.
  • Setting the value of a Boolean attribute to false will not work; use the removeAttribute() method instead.
Was this tutorial helpful ?