Remove element before inserting with jquery

Question

How do I remove the span with child span from #data, so that #result contains "Only text left" ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="data">Only text left <span class='price'>remove this<span>   €0,00</span> </span>
</div>
<div id="result"></div>

<script type="text/javascript">
  $(document).ready(function() {
    var nhtml = $('#data').html();
    $('#result').html(nhtml);
  });
</script>

you set the #data html to Only text left like $('#data').html('Only text left') — guradio
– guradio, Commented Apr 28, 2016 at 9:30

Pranav C Balan · Accepted Answer · 2016-04-28 09:38:58Z

2

Filter text nodes from it using contents() and filter(), then get text content by text()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="data">Only text left <span class='price'>remove this<span>   €0,00</span> </span>
</div>
<div id="result"></div>

<script type="text/javascript">
  $(document).ready(function() {
    var nhtml = $('#data')
      .contents() // get all child nodes including  text and comment node
      .filter(function() {
        return this.nodeType == 3; // filter text node from it
      }).text(); // get the text content from it
    $('#result').html(nhtml);
  });
</script>

Or clone the element using clone() and remove the span, then get the html content

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="data">Only text left <span class='price'>remove this<span>   €0,00</span> </span>
</div>
<div id="result"></div>

<script type="text/javascript">
  $(document).ready(function() {
    var nhtml = $('#data')
      .clone() // clone the element
      .find('.price') // get the span
      .remove() // remove the span
      .end() // back to cloned element
      .html(); // get the html content from cloned element 
    $('#result').html(nhtml);
  });
</script>

edited Apr 28, 2016 at 9:38

answered Apr 28, 2016 at 9:30

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

1 Comment

Pranav C Balan Over a year ago

@Kurdt94 : glad to help you :)

Utsav Oza · Accepted Answer · 2016-04-29 02:49:39Z

0

I have used .remove() function to remove it, you can refer the fiddle link below

$( document ).ready(function() {
$(".price").remove();
  var nhtml = $('#data').html();
  $('#result').html(nhtml);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">Only text left <span class='price'>remove this<span>   €0,00</span> </span> </div>
<div id="result"> </div>

Jsfiddle link for solution

answered Apr 29, 2016 at 2:49

Utsav Oza

134 bronze badges

Collectives™ on Stack Overflow

Remove element before inserting with jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related