JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MyDiv">
  <div>d1</div>
  <div>d2</div>
  <div>d3</div>

  <!- Remove all below ->
  <a>first a</a>
  <a></a>
  <a></a>
  <ul></ul>
  Text with no wrap more text with no wrap
  <div></div>
  Text with no wrap
  <!- Remove all above ->
  Gone
  <table>
    <tr>
      <td>Table</td>
    </tr>
  </table>
  After table
  <a href="#">a after table</a>
</div>
<div class="MyDiv">
  <div>d4</div>
  <div>d5</div>
  <div>d6</div>

  <!- Remove all below ->
  <a>first a</a>
  <a></a>
  <a></a>
  <ul></ul>
  Text with no wrap more text with no wrap
  <div></div>
  Text with no wrap
  <!- Remove all above ->
  Gone
  <table>
    <tr>
      <td>Table</td>
    </tr>
  </table>
  After table
  <a href="#">a after table</a>
</div>

JavaScript

var atest = [];

jQuery.fn.extend({
  removeUntil: function(untilSelector) {
    this.each(function() {
      var theStart = $(this);
      var theParent = theStart.parent();
      var found = false;
      theParent.contents().each(function() {
        if ($(this).is(theStart)) {
          found = true;
        }
        if (found) {
          if ($(this).is(untilSelector)) {
            return false; // stop at first table
          } else {
            $(this).get(0).remove(); // dom / textnodes 
          }
        }
      });
    });
  }
});

$('.MyDiv a:first-of-type').removeUntil('table');