jquery - 根据相关按钮隐藏列表元素

Question

我有一个从 php/mysql 查询生成的简单列表，每个列表项都有一个按钮，如果单击则隐藏元素：

<ul id="mylist">
<li class="item">element 1 <button type="button" id="hideme">hide element</button></li>
<li class="item">element 2 <button type="button" id="hideme">hide element</button></li></ul>

我有这个工作，但我不希望它在单击元素时隐藏元素；我想要按钮：

jQuery(document).ready(function(){
$(".item").click(function(){
    $(this).hide();
});
});

编辑：我想要做的是隐藏<li> 单击按钮时的所有内容，也是按钮。

Answer 1

假设你想隐藏按钮

您可以使用

  $(this).find('button').hide();

此外ID，在 HTML 中必须是唯一的。

我建议你使用class而不是id

<ul id="mylist">
<li class="item">element 1 <button type="button" class="hideme">hide element</button></li>
<li class="item">element 2 <button type="button" class="hideme">hide element</button></li>  </ul>

JavaScript

  $(this).find('.hideme').hide();

演示

编辑

如果要隐藏整行，请使用此

$(".hideme").click(function () {
    $(this).closest('li.item').hide();
});

更新了演示

Answer 2

您可以使用以下代码来做您需要的事情：

jQuery(document).ready(function(){
$(".item").click(function(){
    $(this).find(':button').hide();
});
});

Answer 3

您需要为单击事件定位按钮，然后从按钮目标它的父级隐藏整行。

jQuery(document).ready(function () {
    $("button").click(function () {
        $(this).parent('li').hide();
    });
});