JS removeAttribute() method to delete an attribute of an element

In JavaScript, use the removeAttribute() method of an element to remove a specified attribute. Usage is as follows:
removeAttribute(name)

The parameter name indicates the attribute name of the element.

Example 1

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

<script>
  window.onload = function () { //Bind the event handler function when the page is loaded var table = document.getElementByTagName("table")[0]; //Get a reference to the table frame 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">Restore</button>

In the above example, two buttons are designed and bound to different event handling functions. 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 table.

Example 2

The following example demonstrates how to customize the delete class function and call the function 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 regular expression to check if there is the same style}
  function deleteClass (element, className) {
    if (hasClass (element, className)) {
      element.className.replace (reg, ' '); //Capture the style to be deleted 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 a regular expression to detect whether the className attribute value string contains the specified class name. If it exists, the matched substring is replaced with an empty string to achieve the purpose of deleting the class name.

Differences and similarities between removeAttribute and removeAttributeNode methods

removeAttribute

Removes the attribute with the specified name from the node. The following is an example

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

removeAttributeNode
Note: This method is not compatible with IE.

Directions:

• Get the element whose attribute you want to delete
• Get the attribute to be deleted from the element
• <element>.removeAttributeNode<attribute>

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

Similarities and Differences

Similarities

• Both methods are used to remove node attributes
• The callers of both methods can only be label nodes.

Differences

• The removeAttribute method receives the name of the attribute to be removed.
• The removeAttributeNode method receives the attribute node to be deleted.

This is the end of this article about JS removeAttribute() method to delete a certain attribute of an element. For more information about JS removeAttribute() to delete element attributes, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!