通过jQuery访问已单击的元素<li>的最简单方法是什么?

我在试着去了解 li 元素在通过jQuery的内部。

例如:

$(".delete-button").on('click', function() {

    var listItemToRemove = $(this).parent().parent().parent().parent().parent().parent();
    listItemToRemove.slideUp( function(){ listItemToRemove.remove(); });

});

$(".delete-button").on('click', function() {

  var listItemToRemove = $(this).parent().parent().parent().parent().parent().parent();
  listItemToRemove.slideUp(function() {
    listItemToRemove.remove();
  });

});

.delete-button {
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}

li {
  list-style-type: none;
}

h1 {
  text-align: center;
  font-size: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>
    Delete Some Stuff!
  </h1>
  <div>
    <ul class="mylist">
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 1</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 2</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 3</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 4</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 5</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
    </ul>
  </div>
</div>

https://jsfiddle.net/a1bd9o68/

这是可行的,作为删除按钮所在列表项的一种方法,但是可能有一种更简单的方法。我该怎么做?