Languages
[Edit]
EN

JavaScript - removeAttribute() method example

0 points
Created by:
JoanneSenior
1070

In this article, we would like to show you how to removeĀ attribute fromĀ the element using removeAttribute()Ā methodĀ in JavaScript.

Quick solution:

element.removeAttribute(attributeName);

Where:

  • element - the element from which you want to removeĀ the attribute,
  • attributeName -Ā name of the attribute you want to remove.

Ā 

Practical examples

Example 1

In this example, we will removeĀ class attribute fromĀ the myDiv element using removeAttribute() method.

// ONLINE-RUNNER:browser;

<!DOCTYPE html>
<html>
  <head>
    <style>
      .blue {
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="my-div" class="blue">This is my div.</div>
    <script>
      var myDiv = document.querySelector('#my-div'); // get element by id
      myDiv.removeAttribute('class');  // remove class attribute from myDiv
    </script>
  </body>
</html>

Example 2

In this example, we will removeĀ class attribute fromĀ the myDiv element using removeAttribute()Ā method. TheĀ class value will be removed on the button click event.

// ONLINE-RUNNER:browser;

<!DOCTYPE html>
<html>
  <head>
    <style>

      div {
        margin: 5px 5px 15px 20px;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        border-radius: 10px;
        background: lightgray;
      }

      .red-div {
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="my-div" class="red-div"></div>
	<button onclick="removeClass()">remove class attribute</button>
    <script>
      var myDiv = document.querySelector('#my-div');

      function removeClass() {
        myDiv.removeAttribute('class');
      }
    </script>
  </body>
</html>

Alternative titles

  1. JavaScript - remove attribute method example
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
šŸš€
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ā¤ļøšŸ’» šŸ™‚

Join