<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
How to remove all inline styles
using JavaScript/jQuery ?
</
title
>
<
script
src
=
</
script
>
<
style
>
.parent {
background: green;
}
.child1 {
background: blue;
margin: 10px;
}
.child2 {
background: red;
margin: 10px;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
p
id
=
"GFG_UP"
style
=
"font-size: 15px; font-weight: bold;"
>
</
p
>
<
div
class
=
"parent"
id
=
"parent"
style
=
"color:white"
>
Parent
<
div
class
=
"child child1"
>
Child1
</
div
>
<
div
class
=
"child child2"
>
Child2
</
div
>
</
div
>
<
br
>
<
button
onclick
=
"GFG_Fun()"
>
click here
</
button
>
<
p
id
=
"GFG_DOWN"
style
=
"font-size: 24px; font-weight: bold; color: green;"
>
</
p
>
<
script
>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var parent = document.getElementById('parent');
up.innerHTML = "Click on the button to remove"
+ " the inline style.";
function GFG_Fun() {
$('#parent').attr('style', '');
down.innerHTML = "Inline style has been removed.";
}
</
script
>
</
body
>
</
html
>