"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

Problem with MongoDB - increasing number of connections

Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

Is it possible to implement a Promise.some() function that includes a timeout

The Vue-router is constantly adding a # symbol to the current routes, and it's important to note that this is not the typical problem of hash and

Older versions of Internet Explorer, specifically IE9 and below, do not send the request body when making AJAX calls to a

The excessive use of Selenium Webdriver for loops results in multiple browser windows being opened simultaneously, without allowing sufficient time for the

What is the best way to streamline JSON file data by selectively extracting necessary information?

A method for extracting URL parameters based on the matching route path

Leverage the power of JavaScript by utilizing it as the view

Close the Bootstrap modal upon clicking the "Ok" button in SweetAlert2

Exploring the filter method in arrays to selectively print specific values of an object

When using jsPlumb's beforeDrop function alongside ngToast, the message may not display immediately

How can you create a unique record by appending a number in Javascript?

What steps can I take to resolve the issue of item display in the dropdown menu?

Conceal or reveal radio buttons according to information in a table

broker handling numerous ajax requests simultaneously

What is the most stylish method for merging a removeCartItem function with an addCartItem function?

Obtaining a pdf file using javascript ajax is a straightforward process

What is the relationship between Bower and NPM when they are used together?

Is there a way to change the input type=file value?