javascript - 使用 jQuery/Javascript 隐藏按钮包含的元素

Question

所以我有一些使用 UL 列表和几个 LI 标签排列的图 block 。

我希望在 LI 标签之一内有一个按钮，按下该按钮将隐藏整个图 block 。

不知道该怎么做。类似 - this.('li').hide() 但我知道那是错误的哈哈。

非常感谢。

 <ul class="sortable grid">
        <li>Item 1</li><button onclick="hidePane()">Dismiss</button>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>


 <script>


function hidePane(){

    this.hide();

}

 </script>

我希望它是动态的。其预期用途是用一个循环拉动许多图 block 。因此，我希望每个按钮上都有一个关闭按钮，当您单击时，它只会在您滚动时隐藏图 block 。

Answer 1

不要将元素放在 li 之外。在 ul 中，内部的第一级元素应该始终只是 li，因此您可以在 li 内部放置按钮:

$('.sortable button').on('click', function() {
  $(this).parent('li').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
  <li>Item 1<button>Dismiss</button></li>
  <li>Item 2<button>Dismiss</button></li>
  <li>Item 3<button>Dismiss</button></li>
</ul>

基于您的代码的解决方案，仅使用 JavaScript 意味着使用 event.target 来获取当前单击的按钮及其使用 parentElement 的父级按钮code> 并且您还可以使用 style.display = none; 因为纯 JavaScript 中没有 hide() 方法:

function hidePane(event) {
  event.target.parentElement.style.display = 'none';
}

<ul class="sortable grid">
  <li>Item 1<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 2<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 3<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 4<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 5<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 6<button onclick="hidePane(event)">Dismiss</button></li>
</ul>