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();

DEMO

修改

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

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

Updated DEMO

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();
    });
});

隐藏基于相关按钮的列表元素

3 个答案:

修改