删除列表项的按钮

Question

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

我只想填写我选择的复选框，我的意思是我选中了复选框并且应用了删除线。

示例代码 -

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

你可以在这个JS Fiddle找到完整的工作代码 -

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

演示：Fiddle

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