Какой самый простой способ получить доступ к элементу <li>, по которому щелкнули, - через jQuery?

Question

Я пытаюсь понять, как лучше всего получить доступ к 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/

Это работает, как способ удаления элемента списка, кнопка внутри, но, вероятно, есть гораздо более простой способ. Как бы я совершил sh это?

Answer 1

Используйте .closest и передайте ему селектор этого listItemToRemove вместо:

$(".delete-button").on('click', function() {
  $(this)
    .closest('.whatever')
    .slideUp(function() {
      $(this).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>