Replace or even better remove inline styles with Javascript or jQuery?

Question

Before I posted this question I searched Google (and Stackoverflow) and though there are quite some results for this, I simply don't understand most offered solutions.

Problem I am experiencing is that I use a script which fetches RSS feeds from our main website. This works perfectly, however it also displays the used inline styles, which are being used sometimes. Ofcourse this messes up the way things looks and looks rather, lets say, unprofessional.

I checked the source of what's being loaded and as far as I can tell, the main culprit is an inline style called:

<span style="font-family: verdana,geneva;">text</span>

Less frequent are the following ones (but still rather see them go as well):

<em>text</em>
<strong>text</strong>
<em class="moz-txt-slash">text</em>
<span class="moz-txt-tag">text</span>

Can these all be removed with jQuery or Javascript? Apparently it's possible, but I don't know how. And should I put everything in a seperate div-container?

I can live with the unnecesarry 'p's and 'br's, but rather see the other ones removed.

Anyone out there who is willing to help me with this? My gratitude!

//edit

Thank you all for the quick responses... Highly appreciated.

I use a script called MagicParser to fetch those RSS feeds. I don't know much about coding like PHP, jQuery and Javascript, but I will try to use the solutions. I hope it will work. The first one didn't though :/

You want to remove every style property? if so simply use $(element).removeAttr('style'); — patrykf
– patrykf, Commented Aug 26, 2014 at 13:48
An RSS feed isn't HTML though, right? Shouldn't an RSS feed be a separate XML stream based on the RSS specs? Or do you have HTML content within your RSS feed that you want to cleanup? — Cᴏʀʏ
– Cᴏʀʏ, Commented Aug 26, 2014 at 13:48
Hardest part will be targeting the correct element. Once you have it, you can remove the attribute: api.jquery.com/removeattr — Maxwell Donathan
– Maxwell Donathan, Commented Aug 26, 2014 at 13:49

Jon · Accepted Answer · 2014-08-26 13:50:35Z

1

You can easily target all elements that have inline styles with $("[style]") and remove the styles with .removeAttr("style"):

$("[style]").removeAttr("style");

If you have a DOM node or jQuery collection and want to remove styles from its descendants, simply use .find("[style]").removeAttr("style") on it instead.

Classes are not the same as inline styles, but you can also remove those with .removeClass().

answered Aug 26, 2014 at 13:50

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jon Over a year ago

Downvoter: please help me improve this answer by leaving some feedback. Thanks.

Joanne Over a year ago

Thank you for the reply, I tried it, but it removed all the styles from my page. Guess I have to figure out something else. Thank you nevertheless for the answer. PS: I didn't downvote you, I am happy with all the help I get.

Jon Over a year ago

@HudsonHawk: You need to target just a subsection of your page. Instead of $("[style]") try something along the lines of $("[style]", "#subsection").

Joanne Over a year ago

Thank you for explaining it a bit better. Seems I am just plain dumb at times. I did what you said in the follow up and it works. This removes the styles in the selected subsection. Does this mean I can use div classes for changing the layout? If not, no problem, because it already looks much better...!

Jon Over a year ago

@HudsonHawk: You can use any mechanism you choose, including classes. You can e.g. remove all classes first and then add your own. Or you could write a bunch of rules in the style #subsection .moz-txt-slash to target the classes that already exist in the HTML you get with your own styles.

|

Marion LP · Accepted Answer · 2014-08-26 13:53:13Z

1

You can use jquery:

$("#myID").attr("style","[Nothing here, or eventually styles to override]");

More info there: http://api.jquery.com/attr/

answered Aug 26, 2014 at 13:53

Marion LP

1425 bronze badges

1 Comment

Marion LP Over a year ago

Ok, my bad, I didn't see the last edit of your post. You will have to loop through them. Still with jquery you can use .each. More info from jQuery API again, have a look there: api.jquery.com/each

Collectives™ on Stack Overflow

Replace or even better remove inline styles with Javascript or jQuery?

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest