Jquery: невозможно удалить родительский элемент

Question

Я пытаюсь взять список элементов, которые заполняются отдельно, и отсортировать их по соответствующим UL.

Мой код работает, в основном. Я заметил, что не удается удалить li, в котором находится <span> (вы можете увидеть это визуально через лишнюю точку маркера, которую он оставляет слева). Я попытался удалить .parent() этого <span>, но он просто удаляет все. Как я могу удалить этот дополнительный родительский элемент? Я не нашел ничего подобного в других местах.

$(document).ready(function() {
  $('.sortItem').click(function(event) {
    var seen = {};
    $(".sortingCaret").each(function() {
      var txt = $(this).text();
      if (seen[txt]) {
        var ch = $(this).children().contents();
        $(this).replaceWith(ch);
      } else {
        seen[txt] = true;
      }
    });
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class='sortItem'>Sort</button>
<ul>
  <li><span>Results</span>
    <ul>
      <li><span class='caret sortingCaret'>TOYOTA CTR</span>
        <ul>
          <li><span>MODEL INFO</span>
            <ul>
              <li>MATRIX</li>
              <li>2006</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><span class='caret sortingCaret'>TOYOTA CTR</span>
        <ul>
          <li><span>MODEL INFO</span>
            <ul>
              <li>MATRIX</li>
              <li>2006</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>