列表项的删除按钮

Question

我正在创建此购物清单应用。 该应用程序运行正常，但是我遇到了“删除”按钮的问题。 我想在选中复选框时显示一个按钮。 它在当前应用程序中发生，但它正在填充列表中所有项目的删除按钮。

我只想为我选择的复选框填充它，就是说我选择了复选框并应用了删除线。

示例代码-

/*Checkbox Strikethrough Item Text */
    $('input.check').change(function(){
        $(this).siblings('.item').toggleClass('strike');
        $('.delete_item').removeClass('hidden');
    });

您可以在此JS小提琴中找到完整的工作代码-

http://jsfiddle.net/varunksaini/Zjxq5/

Answer 1

$(this).parents('li').find('.delete_item').removeClass('hidden');

通过单击复选框的父级来查找与“ li”选择器匹配的元素，并使用delete_item类找到其子级并将其显示。

Answer 2

看到

/*Checkbox Strikethrough Item Text */
$('input.check').change(function () {
    $(this).siblings('.item').toggleClass('strike', this.checked);
    $(this).closest('li').find('.delete_item').toggleClass('hidden', !this.checked);
});

演示： 小提琴

Answer 3

您可以这样操作：

$('input.check').change(function(){
        $(this).siblings('.item').toggleClass('strike');
        $(this).parent().next().removeClass('hidden');
    });

Answer 4

$(this).parents('li').children('.delete_item').removeClass('hidden');