javascript - 通过 jQuery 访问被单击的元素内的 <li> 的最简单方法是什么？

Question

我试图了解通过 jQuery 访问元素所在的 li 的最佳方式。

例如:

$(".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/

这是一种删除按钮所在列表项的方法，但可能还有更简单的方法。我该如何实现这个目标？

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>