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

不要将元素放在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;因为纯hide()中没有JavaScript方法：

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 2

你可以试试这个：

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 3

如果你通过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?

Answer 4

你必须使用jQuery：按id选择项目，然后使用hide方法。

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

Answer 5

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

＆＃13;

$("#hide").on('click',function(){

 hidePane($(this).parent());
});

function hidePane(parent){
  parent.hide();
}

＆＃13;

<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>

＆＃13;

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

5 个答案: