Remove spans from html with a class but keep the text

Question

If I had the following html:

<div id="main">
    This <span class="class-two">is</span> a <span class="class-one">string</span> and I want <span class="class-one">to remove</span> spans <span>with the</span> class class-one.
</div>

How would I remove all spans that have the class class-one?

The expected output from the above html would be:

<div id="main">
    This <span class="class-two">is</span> a string and I want to remove spans <span>with a</span> class
</div>

The class-two and the span without a class haven't been removed.

I also need to save the new html string into a variable which is the part I am struggling with.

Something like this: var html = $('#main').$('.class-one').replaceWith((i, txt) => txt);

Ori Drori · Answer 1 · 2018-04-01T21:54:59.407

1

Select #main, and find .class-one. Use .replaceWith() with a function to replace with the text. Then use .end() to return to .main and get the .html():

const result = $('#main')
                   .find('.class-one')
                   .replaceWith((i, txt) => txt)
                   .end()
                   .html();

console.log(result);

.class-one {
  color: red;
}

.class-two {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  This <span class="class-two">is</span> a <span class="class-one">string</span> and I want <span class="class-one">to remove</span> spans <span>with the</span> class class-one.
</div>

edited Apr 01 '18 at 21:54

answered Apr 01 '18 at 21:42

Ori Drori

183,571
29
224
209

Thank you for your answer. This is what I have been doing but I can't work out how to save the contents of the replaceWith into a variable. I want it to get this type of thing `var html = $('#main').$('.class-one').replaceWith((i, txt) => txt);`. Obviously not that but hopefully that gives you an idea of what I am looking for. – Dan Apr 01 '18 at 21:50
Update the question with the code. – Ori Drori Apr 01 '18 at 21:52
I have updated the question. – Dan Apr 01 '18 at 21:53
See updated answer. – Ori Drori Apr 01 '18 at 21:57
That's done the trick thank you very much! – Dan Apr 01 '18 at 21:59
You're welcome :) – Ori Drori Apr 01 '18 at 22:00

Remove spans from html with a class but keep the text

1 Answers1