javascript - 什么是最简单的访问方法一个被点击的元素是通过 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/

这是一种删除按钮所在列表项的方法，但可能有更简单的方法。我将如何做到这一点？

标签： javascriptjqueryhtml

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>