In this tutorial, you’ll see how to remove an attribute from an HTML element using jQuery and vanilla JavaScript.

Using removeAttribute In Vanilla JavaScript

This solution uses removeAttribute method to remove an attribute from an HTML element. Let’s have a look at the below example which removes the style attribute from the div with Id divMain.

<!DOCTYPE html>;
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Remove Attribute Using JavaScript</title>
  <style>
    .bgcolor{
      background-color:yellow;
      width : 100px;
      height : 100px;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', onDomLoad);

    function onDomLoad(){
      document.getElementById('divMain').removeAttribute('style');
    }
  </script>


  <div id="divMain" class="bgcolor">
    
  </div>

The above code removes the style attribute from the div, once the DOM content has loaded successfully.

Using removeAttr In jQuery

This solution uses the jQuery removeAttr method to remove an attribute from an HTML element. Now let’ see it in action:

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Remove Attribute Using jQuery</title>
  <style>
    .bgcolor{
      background-color:yellow;
      width : 100px;
      height : 100px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(function(){
      $('#btnRemove').click(removeAttribute);
    })
    
    function removeAttribute(){
      $('#divMain').removeAttr('style');
    }
  </script>


  <div id="divMain" style="border:1px solid brown;" class="bgcolor">
    
  </div>
  <button id="btnRemove">Remove Attribute</button>

The above code removes the style attribute from div divMain on clicking button btnRemove.