I'm having a trouble with jQuery trying to remove a text after < span> tag to append other text.

Example:

<div id="foo-id">  
    <span id="span-id">  
        <i id="icon-id" class="fa fa-square-o"></i>  
    </span> text..here... (this text needs to be removed)
</div>

I know how to append the text:

$('#foo-id').after()[0].append('this is a text');

But how can I remove/clear the text after < /span> tag to append a new one?

I'm having a trouble with jQuery trying to remove a text after < span> tag to append other text.

Example:

<div id="foo-id">  
    <span id="span-id">  
        <i id="icon-id" class="fa fa-square-o"></i>  
    </span> text..here... (this text needs to be removed)
</div>

I know how to append the text:

$('#foo-id').after()[0].append('this is a text');

But how can I remove/clear the text after < /span> tag to append a new one?

• javascript
• jquery
• html

2 Answers 2

Assuming there are no other text nodes directly within #foo-id you could do something like:

$('#foo-id').html(function(){
   return $(this).children(); //only return elements, not text nodes
}).append('Some new text')

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo-id">  
    <span id="span-id">  
        <i id="icon-id" class="fa fa-square-o"></i>  
    </span> text..here... (this text needs to be removed)
</div>

You can select .nextSibling of #span-id, set .textContent of #text node

$("#foo-id #span-id")[0].nextSibling.textContent = "abc123";

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo-id">  
    <span id="span-id">  
        <i id="icon-id" class="fa fa-square-o"></i>  
    </span> text..here... (this text needs to be removed)
</div>