列表項的刪除按鈕

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