Delete button for list item

Question

I am creating this shopping list app. The app is working fine but I am facing an issue with delete button. I want to show a button when I check the check box. It is happening in current app but it is populating the delete button for all the items in the list.

I only want to populate it for the checkbox that I select, I mean where I have checkbox selected and strikethrough applied.

Sample code -

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

You can find full working code at this JS Fiddle -

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

Answer 1

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

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

Answer 2

See

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

Demo: Fiddle

Answer 3

you can do it this way:

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

Answer 4

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