使用 jQuery/Javascript 隐藏按钮所在的元素

Question

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

我想在其中一个 LI 标签中添加一个按钮，按下时会隐藏整个磁贴。

不知道该怎么做。类似 - 这个。('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>

我希望它是动态的。其预期用途是有一个循环拉入许多瓷砖。所以我喜欢它在每个上都有一个关闭按钮，当你点击它时，它只会在你滚动时隐藏瓷砖。

Answer 1

你必须使用 jQuery: select id 的项目，然后使用隐藏方法。

$('#id_of_li').hide();

Answer 2

不要将元素放在 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 的父按钮，您还可以使用 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>

Answer 3

试试这个代码。它允许您隐藏包含按钮的 li。

$("#hide").on('click',function(){

 hidePane($(this).parent());
});

function hidePane(parent){
  parent.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 id="hide">Dismiss</button></li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

Answer 4

你可以试试这个：

Html代码：

<ul class="sortable grid">
    <li>Item 1 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 2 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 3 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 4 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 5 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 6 <br /><input type="submit" onclick="hidePane(this);"></li>
</ul>

JS代码：

  function hidePane(ref) {
                $(ref).parent().hide()
            }

Answer 5

如果按JQuery

做就更好了

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<ul class="sortable grid">
        <li>Item 1<button class="dismiss"> Dismiss</button></li>
        <li>Item 2<button class="dismiss"> Dismiss</button></li>
        <li>Item 3<button class="dismiss"> Dismiss</button></li>
        <li>Item 4<button class="dismiss"> Dismiss</button></li>
        <li>Item 5<button class="dismiss"> Dismiss</button></li>
        <li>Item 6<button class="dismiss"> Dismiss</button></li>
    </ul>

这是你的 JS

$(".dismiss").click(function () {
 $(this).parent().hide();
});

我建议您不要使用 html onclick()，因为它被认为是一种不好的做法 [Why is using onClick() in HTML a bad practice?

使用 jQuery/Javascript 隐藏按钮所在的元素

Hide an element that button is contained in using jQuery/Javascript

javascript

jquery

list

show

hide