I have this piece of code below:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<style type="text/css">
p { cursor: pointer; font-size: 1.2em; }
.selected { color:red; }
</style>
<script>
$(document).ready(function() {
$('p').click(function () {
$(this).removeClass('selected', 1000);
$(this).removeAttr('class');
//$(this).removeAttr('style');
});
});
</script>
</head>
<body style="font-size:62.5%;">
<p class="selected">Click me to remove 'selected' class.</p>
<p class="selected">Click me to remove 'selected' class.</p>
<p class="selected">Click me to remove 'selected' class.</p>
</body>
</html>
So when I click on any <p> the class does get removed and the attribute class gets removed as well. However what happens is the code style=” ” gets injected into the inline of <p> .
Why does this happen and how do you remove it? To me after you click on a <p> element the new definition for <p> should be merely <p>some text goes here</p>
why the style is there is because of the jquery-ui removeclass() although its not in the documents it seems it has more arguments (see soruce) that you can use to use the callback that will be running after the animation is done:
(I´m not sure why you want to do this in the first place).
a demo: http://jsbin.com/opucon/2/ (result demo)