Удалить текст после <span> и добавить другой текст

Question

У меня возникли проблемы с jQuery, пытаясь удалить текст после тега < span, чтобы добавить другой текст.

Пример:

<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> 

Я знаю, как добавить текст:

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

Но как я могу удалить/очистить текст после </SPAN> тег для добавления новый?

Answer 1

Предполагая, что нет никаких других текстовых узлов непосредственно в #foo-id вы могли бы сделать что-то вроде:

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

<script src="https://ajax.googleapis.com/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>

Answer 2

Вы можете выбрать .nextSibling из #span-id, установите .textContent из #text узла

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

<script src="https://ajax.googleapis.com/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>