JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div>
<div id="firstdiv" class="sample" value="foo">
    	     Hello Jquery
</div>
</div>
<div id="secondelem">
<div id="secondiv" class="sample" value="foo">
    	     Hello Jquery
    </div></div>
<div id="resultjq">
    Before Removing <br/><br/>
    &lt;div id="firstdiv" class="sample" value="foo"&gt;Hello Jquery&lt;/div&gt; <br/><br/>
</div>
<div id="resultjs">
    Before Removing <br/><br/>
    &lt;div id="secondiv" class="sample" value="foo"&gt;Hello Jquery&lt;/div&gt; <br/><br/>
</div>
<input type="button" value="Remove Attribute using Jquery" id="buttonjq"/>
<input type="button" value="Remove Attribute using JS" id="buttonjs"/>

CSS

.sample{
    font-size: 35px;
    color: blue;
    position: relative;
    height: 80px;
}

JavaScript

//In Jquery

$("#buttonjq").on("click",function(){
    $("#firstdiv").removeAttr('value');
    $("#resultjq").html("After Removing<br/><br/>" + $("div:first").html().replace("<","&lt;") + "<br/><br/>");
});

//In Javascript

document.getElementById("buttonjs").onclick = function(){
    document.getElementById("secondiv").removeAttribute("value");
    document.getElementById("resultjs").innerHTML = "After Removing <br/><br/>" + document.getElementById("secondelem").innerHTML.replace("<","&lt;") + "<br/><br/>";
}