Deletes text that does not have its own element


I have some HTML that looks like this:

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

I need to remove the SYSTEM text after sourcedidSource while keeping everything else intact. I tried $('.field').text().remove();, but that removes the input and span elements as well. What should I do?

It's actually a lot easier to work with textnodes without jQuery

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

Or the funky jQuery version