刪除此內容並且只顯示此元素jQuery

我正在創建一個動態列表，其中輸入寫入後輸入的任務長度小於或等於30個字符並按下按鈕。刪除此內容並且只顯示此元素jQuery

與任務一起創建垃圾圖標。

我想讓用戶在點擊來自外部庫ionicons的圖標時刪除選定的任務。

我有一個問題，點擊垃圾圖標時，它會刪除此Li以及在點擊Li之後創建的所有Li元素。

我將li元素預先添加到列表中。

這裏的片段：

$('#addNewTaskBtn').click(function() { 
    var inputText = $('#dayTask').val(); 
    var trashIcon = '<i class="ion-trash-b"></i>'; 
    var newTask = $('<li />', { html: inputText + " " + trashIcon }); 

    // clearing the input after click 
    $('#dayTask').val(''); 

    if (inputText.length && inputText.length <= 30) 
     $(newTask).prependTo('ul.dayList'); 

    $('.ion-trash-b').click(function() { 
     $(newTask).remove(); 
    }); 
});

我的問題是：如何刪除點擊該回收站圖標，後來只創建一個鋰元素，而不是所有的李元素（包括一個）？

非常感謝您的幫助。

來源

2016-02-13 mjrdnk

歡迎so so。用適當數量的代碼和努力寫得很好的問題。添加UL html將會是蛋糕上的錦上添花:) – mplungjan

$('.ion-trash-b').click(function(){ 
    $(this).parent().remove(); // or $(this).closest("li").remove(); 
});

，甚至將其指定爲onload使用event delegation

$(function() { 
    $("#listContainer").on("click",".ion-trash-b",function(){ 
    $(this).parent().remove();// or $(this).closest("li").remove(); 
    }); 
});

其中listContainer是的UL

來源

2016-02-13 17:18:15 mplungjan

我使用了你的anwser，非常感謝你！ – mjrdnk

的ID刪除點擊ion-trash-b的最接近li和附着於未來所有的垃圾桶圖標您的元素是動態生成的，請使用event delegation作爲ion-trash-b單擊事件，如下所示。

$('#addNewTaskBtn').click(function() { 
    var inputText = $('#dayTask').val(); 
    var trashIcon = '<i class="ion-trash-b"></i>'; 
    var newTask = $('<li />', { html: inputText + " " + trashIcon }); 

    // clearing the input after click 
    $('#dayTask').val(''); 

    if (inputText.length && inputText.length <= 30) 
     $(newTask).prependTo('ul.dayList');   
}); 

$('body').on('click', '.ion-trash-b', function() { 
    $(this).closest('li').remove(); 
});

來源

2016-02-13 17:18:44 Azim

謝謝你的回答。兩種解決方案：你和mplungjan都在工作。 – mjrdnk

刪除此內容並且只顯示此元素jQuery

回答

相關問題