The JS removeAttribute of method implements deleting an attribute of an element

In JavaScript, the specified attribute can be deleted using the removeAttribute () method of the element. The usage is as follows:
removeAttribute(name)

The parameter name represents the attribute name of the element.

Example 1

The following example demonstrates how to dynamically set the border of a table.

<script>
  window.onload = function () { // Event handler when binding page is loaded 
    var table = document.getElementByTagName("table")[0]; // Gets a reference to the outer box of the table 
    var del = document.getElementById("del");
    var reset = document.getElementById("reset");
    del.onclick = function () {
      table.removeAttribute("border");
    }
    reset.onclick = function () {
      table.setAttribute("border", "2");
    }
</script>
<table width="100%" border="2">
  <tr>
    <td> Data table </td>
  <tr>
</table>
<button id="del"> Delete </button><button id="reset"> Recovery </button>

In the above example, two buttons are designed and bound with different event handlers. Click the "Delete" button to call the table's removeAttribute () method to clear the table border, and click the "Restore" button to call the table's setAttribute () method to reset the thickness of the cousin.

Example 2

The following example demonstrates how to customize the Delete Class function and call it to delete the specified class name.

<script>
  function hasClass (element, className) { // Class name detection function 
    var reg = new RegExp ('(\\s|^)' + className + '(\\s|$)');
    return reg.test (element, className); // Use regularity to detect whether there are identical styles 
  }
  function deleteClass (element, className) {
    if (hasClass (element, className)) {
      element.className.replace (reg, ' '); // Capture the style you want to delete and replace it with a blank string 
    }
  }
</script>
<div id="red" class="red blue bold"> Box </div>
<script>
  var red = document.getElementById ("red");
  deleteClass (red, 'blue');
</script>

The above code uses regular expressions to detect whether the specified class name is contained in the className attribute value string, and if so, it replaces the matching substring with an empty string, thus removing the class name.

Similarities and differences between removeAttribute and removeAttributeNode methods

removeAttribute

Removes the attribute of the specified name of the node. Examples are as follows

document.getElementById('riskTypePie').removeAttribute("style");

removeAttributeNode
Note: This method is not compatible with IE.

Usage:

Gets the element to delete the attribute Gets the attribute to delete for this element < Element > .removeAttributeNode < Attribute >

var node=document.getElementById('chartWrap');
var attr=n.getAttributeNode('style');
node.removeAttributeNode(attr);

Similarities and differences analysis

Similarity

Both methods are used to remove node attributes Both method callers can only be tag nodes

Differences

The removeAttribute method receives the name of the property to be deleted The removeAttributeNode method receives the attribute node itself to be deleted