I have implemented a feature where tasks are dynamically added to a list when the input is entered and its length is less than or equal to 30 characters, followed by clicking a button.
Each task comes with a trash icon for removal, sourced from an external library called ionicons.
The issue I am facing is that when the trash icon is clicked, it not only removes the targeted task but also all tasks created after it in the list.
To add tasks, I am using the prepend method for li elements.
Below is a snippet of the code:
$('#addNewTaskBtn').click(function () {
var inputText = $('#dayTask').val();
var trashIcon = '<i class="ion-trash-b"></i>';
var newTask = $('<li />', { html: inputText + " " + trashIcon });
// Clearing the input field after click
$('#dayTask').val('');
if (inputText.length && inputText.length <= 30)
$(newTask).prependTo('ul.dayList');
$('.ion-trash-b').click(function () {
$(this).parent().remove(); // changed this line to target the parent li element
});
});
Now, my question is: How can I modify the code so that only the specific Li element associated with the clicked trash icon is removed, without affecting other Li elements that were created later?
Thank you for your assistance.