Remove certain span tags, keep the text inside - Javascript/jquery

Question

I have the following html:

<h1>These are <span style="color: red;">RED</span> words</h1>
<h2>These are <span class="green">GREEN</span> words</h2>
<h3>These are more <span style="color: red;">RED</span> words</h3>

I want:

<h1>These are RED words</h1>
<h2>These are <span class="green">GREEN</span> words</h2>
<h3>These are more RED words</h3>

In other words, I want to use javascript or jquery to remove the just the <span style="color: red;"></span> but keep everything else. And the span tags have no id, just that style to distinguish them.

Thanks for the help.

Do you only want to remove span tags that have a style="color: red" or do you want to remove span tags that have any style inlined? Or do you want to remove span tags that have a style inlined with no class? — joshweir
– joshweir, Commented Mar 7, 2018 at 1:34

Gerard Cuadras · Accepted Answer · 2018-03-07 01:50:35Z

8

You could use unwrap(). Here you can find the documentation. Also remember to check if the span has the property style.

$('h1, h2, h3').find('span').each(function(){
    if($(this).attr('style')){
      $(this).contents().unwrap();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>These are <span style="color: red;">RED</span> words</h1>
<h2>These are <span class="green">GREEN</span> words</h2>
<h3>These are more <span style="color: red;">RED</span> words</h3>

edited Mar 7, 2018 at 1:50

answered Mar 7, 2018 at 1:40

Gerard Cuadras

1,6631 gold badge17 silver badges24 bronze badges

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

3 Comments

Jtbs Over a year ago

that's a good thing to know, but how would you select the text content in order to match the parent?

Jtbs Over a year ago

Nice! Maybe put in an if statement for .css ('color')

Gerard Cuadras Over a year ago

@Jtbs, yes, just added it. Thx

DannyMoshe · Accepted Answer · 2018-03-07 02:08:41Z

0

This works too:

$('h1').text($('h1').text())
$('h3').text($('h3').text())

Of course you still need logic to test if style exists on the span, just showing there is another way to remove the span and preserve text.

edited Mar 7, 2018 at 2:08

answered Mar 7, 2018 at 2:03

DannyMoshe

6,3257 gold badges36 silver badges57 bronze badges

Collectives™ on Stack Overflow

Remove certain span tags, keep the text inside - Javascript/jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related