"Utilizing JQuery to enhance task management by implementing a delete function

Question

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestions on how to achieve this?

 
        function addTask(){
            var text = $("#new-text").val();
            if(text!=""){
                $("#todolist").append('<li><input type="checkbox" class="done" />' + text + '  <button class="delete">Remove Task</button></li>');
                $("#new-text").val('');
               
            }
           
         }
         function deleteTask(){
            if($(this).parent().css('textDecoration') == 'line-through' ) {
                $(this).parent().remove();
            }else{
                $(this).parent().remove();
            }
         }
        
         function markAsDone(){
            if($(this).parent().css('textDecoration') == 'line-through' ) {
                $(this).parent().css('textDecoration', 'none');
            }else{
                $(this).parent().css('textDecoration', 'line-through');
            }
         }
         
         $(function()  {
            $('input[type=text]').keydown(function(e){
               if(e.keyCode === 13){
                    addTask();
                }  
            });
            $("#add").on('click', addTask);
            $(document).on('click', '.delete', deleteTask);
            $(document).on('click', '.done', markAsDone);
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="x" class="position">To-Do List</h1>
               <div contenteditable="true">
               <ul id="todolist" class="background">
                   <li><input type="checkbox" class="done"/> Clean house <button class="delete">Remove Task</button></li>
                   <li><input type="checkbox" class="done"/>Buy milk <button class="delete">Remove Task</button></li>
               </ul>
            </div>
               <input type="text" id="new-text" /><button  id="add">Add</button>

javascript jquery html css

Answer 1

Answer №1

If you need to iterate through the array returned by $("#todolist input:checked") and remove each element, you can use a loop to target each checked checkbox. For instance, you can achieve this with the following code snippet:

$("#todolist input:checked").each(function (index, elem) { deleteItem(elem) });

Or in your scenario, you could use deleteItem.apply(elem) since you are utilizing $(this) within your deleteItem function.

To handle the deletion of all checked items separately, you can create a new handler named deleteCheckedItems(). Your updated code might look like this:

function addListItem() {
  var text = $("#new-text").val();
  if (text != "") {
    $("#todolist").append('<li><input type="checkbox" class="done" /> ' + text + '<button class="delete">Remove Task</button></li>');
    $("#new-text").val('');
  }
}

function deleteCheckedItems() {
  $("#todolist input:checked").each(function(index, elem) {
    deleteItem.apply(elem);
  });
}

function deleteItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().remove();
  } else {
    $(this).parent().remove();
  }
}

function finishItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().css('textDecoration', 'none');
  } else {
    $(this).parent().css('textDecoration', 'line-through');
  }
}

$(function() {
  $('input[type=text]').keydown(function(e) {
    if (e.keyCode === 13) {
      addListItem();
    }
  });
  $("#add").on('click', addListItem);
  $(document).on('click', '.delete-checked', deleteCheckedItems);
  $(document).on('click', '.delete', deleteItem);
  $(document).on('click', '.done', finishItem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="x" class="position">To-Do List</h1>
<div contenteditable="true">
  <ul id="todolist" class="background">
    <li><input type="checkbox" class="done" /> Clean house <button class="delete">Remove Task</button></li>
    <li><input type="checkbox" class="done" /> Buy milk <button class="delete">Remove Task</button></li>
  </ul>
</div>
<button class="delete-checked">Delete All Completed</button><br/><br/>
<input type="text" id="new-text" /><button id="add">Add</button>

Answer 2

If you need to iterate through the array returned by $("#todolist input:checked") and remove each element, you can use a loop to target each checked checkbox. For instance, you can achieve this with the following code snippet:

$("#todolist input:checked").each(function (index, elem) { deleteItem(elem) });

Or in your scenario, you could use deleteItem.apply(elem) since you are utilizing $(this) within your deleteItem function.

To handle the deletion of all checked items separately, you can create a new handler named deleteCheckedItems(). Your updated code might look like this:

function addListItem() {
  var text = $("#new-text").val();
  if (text != "") {
    $("#todolist").append('<li><input type="checkbox" class="done" /> ' + text + '<button class="delete">Remove Task</button></li>');
    $("#new-text").val('');
  }
}

function deleteCheckedItems() {
  $("#todolist input:checked").each(function(index, elem) {
    deleteItem.apply(elem);
  });
}

function deleteItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().remove();
  } else {
    $(this).parent().remove();
  }
}

function finishItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().css('textDecoration', 'none');
  } else {
    $(this).parent().css('textDecoration', 'line-through');
  }
}

$(function() {
  $('input[type=text]').keydown(function(e) {
    if (e.keyCode === 13) {
      addListItem();
    }
  });
  $("#add").on('click', addListItem);
  $(document).on('click', '.delete-checked', deleteCheckedItems);
  $(document).on('click', '.delete', deleteItem);
  $(document).on('click', '.done', finishItem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="x" class="position">To-Do List</h1>
<div contenteditable="true">
  <ul id="todolist" class="background">
    <li><input type="checkbox" class="done" /> Clean house <button class="delete">Remove Task</button></li>
    <li><input type="checkbox" class="done" /> Buy milk <button class="delete">Remove Task</button></li>
  </ul>
</div>
<button class="delete-checked">Delete All Completed</button><br/><br/>
<input type="text" id="new-text" /><button id="add">Add</button>

"Utilizing JQuery to enhance task management by implementing a delete function

Answer №1

Similar questions

I'm curious as to why the web browser is showing a timestamp below the image I have on my HTML page

Exploring AngularJS: Retrieving a list of filenames from a specified directory

Leverage the Power of Multiple Markers on Google Maps with API Integration

Exploring the world of data manipulation in AngularJS

Having trouble getting Fullcalendar to show up on my cordova app

Adjust the fade-in effect to transition from a white hue to a custom color

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

MUI: reveal multiple selection when hovering & prevent dropdown from moving around

Tips for returning JSON data using AJAX

Is there a way to deactivate the dot key using the keyup event in Vue.js 2?

The FaceDetector within the expo application continues to activate the "onFacesDetected" event in "accurate" mode unnecessarily, even when no face is present

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

generate a cookie within a pop-up window

JavaScript substring() function in clone is experiencing an error

"Put Phonegap on hold for a bit and disable landscape mode

When a form input is submitted, the webpage will refresh with a new

Creating a selectAll checkbox that triggers the ng-click function on each individual checkbox

Steps for extracting HTML content from a beautiful soup object

What is the best approach to execute the jquery script exclusively on mobile devices?

Utilizing client-side properties in an onClick event within Next.js framework