JavaScript - removeAttributeNode() method

revision:

Category : element

The removeAttributeNode() method of the Element interface removes the specified attribute from the element.

The difference between removeAttribute() and removeAttributeNode() : the removeAttribute() method removes an attribute, and does not have a return value. The removeAttributeNode() method removes an Attr object, and returns the removed object. The result will be the same.

Syntax : 

        removeAttributeNode(attributeNode)

Parameters:

attributeNode : The attribute node to remove from the element.

Examples: 

            // Given: <div id="top" align="center" />
            const d = document.getElementById("top");
            const d_align = d.getAttributeNode("align");
            d.removeAttributeNode(d_align);
            // align is now removed: <div id="top" />

Practical examples

example: remove the class attribute node from an <h4> element.

The Element Object

Click "Remove" to remove the class attribute node from the first h4 element.

code: 
                    <div>
                        <h4 class="democlass">The Element Object</h4>
                        <p>Click "Remove" to remove the class attribute node from the first h4 element.</p>
                        <button onclick="removeFun()">Remove</button>
                    </div>
                    <style>
                        .democlass {color: red;}
                    </style>
                    <script>
                        function removeFun() {
                            const element = document.getElementsByTagName("H4")[0];
                            const attr = element.getAttributeNode("class");
                            element.removeAttributeNode(attr);
                        }
                    </script>

example: remove the href attribute node from a link.
A Link: Go to my website

Click "Remove" to remove the href attribute node from the <a> element.

code: 
                    <div>
                        <a id="myAnchor" href="https://www.lwitters.com">A Link: Go to my website</a>
                        <p id="remove-1">Click "Remove" to remove the href attribute node from the <a> element.</p>
                        <button onclick="removeFun2()">Remove</button>
                    </div>
                    <script>
                        function removeFun2() {
                            const element = document.getElementById("myAnchor");
                            const attr = element.getAttributeNode("href");
                            element.removeAttributeNode(attr);
                        }
                    </script>

example: remove a style attribute node by clicking a button.

Hello World

Click the button to remove the style attribute node in the header.

code: 
                    <div>
                        <h4 style="color:red">Hello World</h4>
                        <p id="demo">Click the button to remove the style attribute node in the header.</p>
                        <button onclick="removeFun3()">try it</button>
                    </div>
                    <script>
                        function removeFun3(){
                            var n=document.getElementsByTagName("H4")[1];
                            var a=n.getAttributeNode("style");
                            n.removeAttributeNode(a);
                        }
                        
                    </script>