Find Class attribute using JQuery "removeAttr"

Question

I want remove text-align attribute from a class using Jquery

for example:

CSS

.main{ text-align:left; padding:10px;}

HTML.

<h2 id="abc" class="main">
 <div id="xyz"></div>
</h2> 

Using xyz id, How can I remove text-align attribute?

Answer 1

try this

$("#xyz").parent().css({'text-align': "initial"});

Answer 2

There are no styles for #xyz so you have to get the parent first:

$("#xyz").parent().css('padding', 0);

If you want to remove the entire class you might use removeClass:

$("#xyz").parent().removeClass("main");

Answer 3

It works for me:

var ix=$("#xyz").closest('h2').attr("id")
$("#"+ix+".main").css('text-align', "initial");

Answer 4

The text-align style rule is not given through an html attribute. It is set via a css rule.

If you want to change the style of #xyz, the simplest way is to add a rule in your css stylesheet :

.main{ text-align:left;padding:10px;}
#xyz {text-align: right}

or use an extra class (if you need to apply it to several items) :

.main{ text-align:left;padding:10px;}
.right-aligned {text-align: right}

Using jQuery, what you can do is add a style attribute with another text-align rule, which will override the css rule :

$('#xyz').css('text-align', 'right');