How can I replace html with jQuery?

Question

I have the following code:

<ul class="breadcrumbs-wrapper">
   <li>Link A (one)</li>
   <li>Link A <span style="font-size:10px">(two)</span></li>
   <li>Link B</li>
   <li>Link C</li>
</ul>

My goal: Eliminating the span within the second li with pure jQuery.

My desired outcome:

 <ul class="breadcrumbs-wrapper">
    <li>Link A (one)</li>
    <li>Link A (two)</li>
    <li>Link B</li>
    <li>Link C</li>
 </ul>

My attempt so far:

var replaced = jQuery(".breadcrumbs-wrapper").html().replace(/<span style="font-size:10px">(two)</span>/g,'(two)');
jQuery(".breadcrumbs-wrapper").html(replaced);

What is wrong here? How do I need to adapt the code?

JSFIDDLE: https://jsfiddle.net/g6b82qya/

score 0 · Accepted Answer · answered Jul 09 '20 at 13:44

Use DOM and not strings. unwrap is what you want to use.

$(".breadcrumbs-wrapper li span[style]").contents().unwrap()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="breadcrumbs-wrapper">
   <li>Link A (one)</li>
   <li>Link A <span style="font-size:10px">(two)</span></li>
   <li>Link B</li>
   <li>Link C</li>
</ul>

How can I replace html with jQuery?

1 Answers1