jQuery: Delete HTML AND unknown content/amount of plain-text between elements

Question

Given the following HTML:

<div class="date">
<span>
    <i class="far fa-user"></i>&nbsp;{Name}
    <i class="fas fa-link"></i>&nbsp; LINK
    <i class="fas fa-sync-alt"></i>&nbsp;{ReblogSource}
</span>
<span>
    <!--irrelevant content-->
</span>
</div>

How do I completely remove <i class="far fa-user"></i>&nbsp;{Name} when {Name} could be any (number of) plain-text characters? The <span> it appears in is the first child of .date (though there are many other instance of <span> on the page), and the string I want to remove is the first child of that. Based on Christophe's answer, I thought I could try

var string = '/<i class="far fa-user"></i>.+<i class="fas fa-link"></i>/';
replace(string, '<i class="fas fa-link"></i>');

but evidently there's something wrong with that. I'm... rather bad at this language.

+: {ReblogSource} also becomes an unknown length/content string of plain text. <i> is FontAwesome. I would rather not have answers involve the second <span>, especially if it must be involved by exact content.

++: I see both answers work in the snippet, but for some strange reason, Tumblr doesn't want to make it work. I've attached a screenshot of my end of things here, but I have a feeling I'll need to troubleshoot on my own from here.

Answer 1

How about using DOMParser instead? Select the span, then remove its first three child nodes (two text nodes and the <i>):

const str = `<div class="date">
<span>
    <i class="far fa-user"></i>&nbsp;{Name}
    <i class="fas fa-link"></i>&nbsp; LINK
    <i class="fas fa-sync-alt"></i>&nbsp;{ReblogSource}
</span>
<span>
    <!--irrelevant content-->
</span>
</div>`;
const doc = new DOMParser().parseFromString(str, 'text/html');
const span = doc.querySelector('span');
span.childNodes[2].remove(); // text node
span.childNodes[1].remove(); // <i> tag
span.childNodes[0].remove(); // text node
console.log(doc.body.innerHTML);

Answer 2

You can use contents() which includes text nodes and each() and break when you get to .fa-link

$('.date span:first').contents().each(function() {
  const $el = $(this);
  if ($el.hasClass('fa-link')) {
    return false// breaks each loop
  }
  $el.remove();
});

console.log($('.date')[0].outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date">
  <span>
    <i class="far fa-user">fa-user</i>&nbsp;{Name}
    some extra text
    more extra text
    <i class="fas fa-link">fa-link</i>&nbsp; LINK
    <i class="fas fa-sync-alt">fa-sync-alt</i>&nbsp;{ReblogSource}
</span>
  <span>
    irrelevant content
</span>
</div>

If the source html is a string just insert it into a temporary element and do same thing

const str = `<div class="date">
<span>
    <i class="far fa-user"></i>&nbsp;{Name}
    <i class="fas fa-link"></i>&nbsp; LINK
    <i class="fas fa-sync-alt"></i>&nbsp;{ReblogSource}
</span>
<span>
    irrelevant content
</span>
</div>`

const $div = $('<div>').html(str)

$div.find('.date span:first').contents().each(function() {
  const $el = $(this);
  if ($el.hasClass('fa-link')) {
    return false // breaks loop
  }
  $el.remove();
});
console.log($div.html())