Удалить текст, который не имеет свой собственный элемент

Question

У меня есть некоторые HTML, который выглядит следующим образом:

<div class="field"> 
    <input type="text" name="name" id="sourcedidSource" value="SYSTEM">SYSTEM 
    <span class="someClass"></span> 
</div> 

Мне нужно удалить SYSTEM текст после sourcedidSource, сохраняя при этом все остальное нетронутым. Я пробовал $('.field').text().remove();, но это удаляет элементы input и span. Что мне делать?

Answer 1

Это на самом деле намного проще работать с textnodes без JQuery

var node = document.getElementById('sourcedidSource').nextSibling; 
node.parentNode.removeChild(node); 

Или фанки JQuery версия

$($('#sourcedidSource').get(0).nextSibling).remove(); 

Answer 2

Вместо $('.field').text().remove();

ли $('#sourcedidSource').text('') ИЛИ $('#sourcedidSource').text().remove()

Это будет направлена ​​на конкретное поле ввода вы имеете и установить текстовое содержимое в пустую строку, ''.

Answer 3

Вы можете использовать contents() и filter() получить textNode внутри .field и remove() их. Попробуйте это:

$('.field').contents().filter(function() { 
    return this.nodeType == 3; 
}).remove(); 

Example fiddle

Answer 4

Существует ваше решение: https://jsfiddle.net/yuswddpg/

$(".field").contents().filter(function(){ 
    return (this.nodeType == 3); 
}).remove();