Unable to remove section from task roster

Question

Unable to remove section from task roster

I'm currently working on a task management application, and within this app, there is a container that encompasses an input field (for entering tasks) and an icon from the font-awesome library. When the user interacts with the icon, I intend for the entire container (including the task and delete icon) to be removed. However, my initial attempts at implementing this feature have not been successful. Can someone provide guidance or assistance?

Below is the snippet of JavaScript code being used:

$(document).ready(() => {
    $(".input input").on("keypress", check_todo);
    $(".fa-trash").on("click", ".todo_container", delete_todo);
})

// Function to delete a task
let delete_todo = (e) => {
    e.target.remove();
}

// Function to add a new task
let add_todo = () => {
    let todo = $(".input input").val();

    $(".output").append(`
        <input type="text" placeholder="Edit To-do" value="${todo}"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        `);
    $(".input input").val("");
}

// Function to validate and process a new task
let check_todo = (e) => {
    if (e.keyCode == 13) {
        if ($(".input input").val() == "") {
            no_todo();
        } else {
            add_todo();
        }
    }
}

// Function called when no task is provided
let no_todo = () => {
    alert("Please add a new todo");
}

If you would like to see the HTML structure and a demo, you can visit the following link: View here

javascript jquery html css

Answer 1

Answer №1

Make sure to bind to the .out-put element.

$(".output").on("click",".fa-trash" , delete_todo);

For more details, visit this link

Answer 2

Make sure to bind to the .out-put element.

$(".output").on("click",".fa-trash" , delete_todo);

For more details, visit this link

Answer 3

Answer №2

http://codepen.io/anon/pen/eBoXZe

Ensure that in your event listener, the sequence should be changed to swap ".todo_container" and ".fa-trash".

 $(".todo_container").on("click",".fa-trash" , delete_todo);

This logic instructs that when a click event happens and propagates to .todo_container, it will verify if the element clicked is .fa-trash, and if so, execute the designated function.

Next step is to modify your delete function as follows:

let delete_todo = (e) => {
    $(e.currentTarget).closest('.todo_container').remove()
}

This script means starting from the clicked icon, traverse up the document object model (DOM) until it locates .todo_container, then delete it.

Answer 4

http://codepen.io/anon/pen/eBoXZe

Ensure that in your event listener, the sequence should be changed to swap ".todo_container" and ".fa-trash".

 $(".todo_container").on("click",".fa-trash" , delete_todo);

This logic instructs that when a click event happens and propagates to .todo_container, it will verify if the element clicked is .fa-trash, and if so, execute the designated function.

Next step is to modify your delete function as follows:

let delete_todo = (e) => {
    $(e.currentTarget).closest('.todo_container').remove()
}

This script means starting from the clicked icon, traverse up the document object model (DOM) until it locates .todo_container, then delete it.

Answer 5

Answer №3

Great work incorporating delegation in JQuery! However, be mindful of the static base element $(".todo_container") being deleted in the delete_todo() function.

$(".todo_container").on("click",".fa-trash" , delete_todo);

Consider using $(".output") instead and test if it functions as expected.

Answer 6

Great work incorporating delegation in JQuery! However, be mindful of the static base element $(".todo_container") being deleted in the delete_todo() function.

$(".todo_container").on("click",".fa-trash" , delete_todo);

Consider using $(".output") instead and test if it functions as expected.

Answer 7

Answer №4

Take a look at this functional code snippet:

$(document).ready(function() {
  $(".input input").on("keypress", check_todo);
  //$(".fa-trash").on("click", ".todo_container", delete_todo);
  $(".todo_container .fa-trash").on("click", delete_todo);
})

// function to delete a todo item
let delete_todo = function(e) {
  //e.target.remove();
  $(e.target).parent().remove();
}

// function to add a new todo item
let add_todo = function() {
  let todo = $(".input input").val();

  // Creating the to-do container element with the delete icon appended later
  var toDoContainer = $(`
        <div class="todo_container">
            <input type="text" placeholder="Edit To-do" value="${todo}"></div>
        `);

  // Adding delete icon and setting event listener
  var elem = $('<i class="fa fa-trash fa-lg" aria-hidden="true"></i>').on("click", delete_todo).appendTo(toDoContainer);

  // Appending the new to-do item to the output section
  $(".output").append(toDoContainer);
  $(".input input").val("");
}

// function to check the entered todo item
let check_todo = (e) => {
  if (e.keyCode == 13) {
    if ($(".input input").val() == "") {
      no_todo();
    } else {
      add_todo();
    }
  }
}

// Display an alert if there is no todo item entered
let no_todo = () => {
  alert("Please add a new todo");
}

@font-face {
  font-family: Open Sans;
  src: url("assets/fonts/OpenSans-Regular");
  font-weight: 400
}
@font-face {
  font-family: Open Sans;
  src: url("assets/fonts/OpenSans-Semibold");
  font-weight: 600
}
* {
  margin: 0;
  padding: 0;
  transition: all 200ms ease-in-out;
}
*::selection {
  background-color: #ffffaa;
}
.container {
  width: 60%;
  margin: 20px auto;
}
.header {
  padding: 10px;
}
.header input {
  padding: 10px;
  width: 60%;
  border: none;
  outline: none;
  font: 400 1.8em Open Sans;
}
.to-do {
  padding: 10px;
  text-align: center;
}
.input input {
  padding: 10px;
  width: 40%;
  border: none;
  outline: none;
  font: 600 1em Open Sans;
  border-bottom: 3px solid #333;
}
.output {
  margin: 10px;
}
.output input {
  padding: 20px;
  border: none;
  outline: none;
  font: 600 1em Open Sans;
  width: 50%;
  cursor: pointer;
}
.output input:hover {
  background-color: #eee;
}
.fa-trash {
  padding: 20px;
  cursor: pointer;
}
.fa-trash:hover {
  background-color: #333;
  color: #fff;
}

<head>
  <title>To-do List</title>

  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500" rel="stylesheet">
</head>

<body>
  <div class="container">

    <header class="header">
      <input type="text" name="edit_name" placeholder="Edit Name">
    </header>

    <section class="to-do">
      <div class="input">
        <input type="text" name="add_todo" placeholder="Click To Add A New To-do">
      </div>

      <div class="output">
        <div class="todo_container">
          <input type="text" placeholder="Edit To-do" value="Todo #1"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        </div>

        <div class="todo_container">
          <input type="text" placeholder="Edit To-do" value="Todo #2"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        </div>
      </div>
    </section>

  </div>


  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script src="https://use.fontawesome.com/5840114410.js"></script>
</body>

Answer 8

Take a look at this functional code snippet:

$(document).ready(function() {
  $(".input input").on("keypress", check_todo);
  //$(".fa-trash").on("click", ".todo_container", delete_todo);
  $(".todo_container .fa-trash").on("click", delete_todo);
})

// function to delete a todo item
let delete_todo = function(e) {
  //e.target.remove();
  $(e.target).parent().remove();
}

// function to add a new todo item
let add_todo = function() {
  let todo = $(".input input").val();

  // Creating the to-do container element with the delete icon appended later
  var toDoContainer = $(`
        <div class="todo_container">
            <input type="text" placeholder="Edit To-do" value="${todo}"></div>
        `);

  // Adding delete icon and setting event listener
  var elem = $('<i class="fa fa-trash fa-lg" aria-hidden="true"></i>').on("click", delete_todo).appendTo(toDoContainer);

  // Appending the new to-do item to the output section
  $(".output").append(toDoContainer);
  $(".input input").val("");
}

// function to check the entered todo item
let check_todo = (e) => {
  if (e.keyCode == 13) {
    if ($(".input input").val() == "") {
      no_todo();
    } else {
      add_todo();
    }
  }
}

// Display an alert if there is no todo item entered
let no_todo = () => {
  alert("Please add a new todo");
}

@font-face {
  font-family: Open Sans;
  src: url("assets/fonts/OpenSans-Regular");
  font-weight: 400
}
@font-face {
  font-family: Open Sans;
  src: url("assets/fonts/OpenSans-Semibold");
  font-weight: 600
}
* {
  margin: 0;
  padding: 0;
  transition: all 200ms ease-in-out;
}
*::selection {
  background-color: #ffffaa;
}
.container {
  width: 60%;
  margin: 20px auto;
}
.header {
  padding: 10px;
}
.header input {
  padding: 10px;
  width: 60%;
  border: none;
  outline: none;
  font: 400 1.8em Open Sans;
}
.to-do {
  padding: 10px;
  text-align: center;
}
.input input {
  padding: 10px;
  width: 40%;
  border: none;
  outline: none;
  font: 600 1em Open Sans;
  border-bottom: 3px solid #333;
}
.output {
  margin: 10px;
}
.output input {
  padding: 20px;
  border: none;
  outline: none;
  font: 600 1em Open Sans;
  width: 50%;
  cursor: pointer;
}
.output input:hover {
  background-color: #eee;
}
.fa-trash {
  padding: 20px;
  cursor: pointer;
}
.fa-trash:hover {
  background-color: #333;
  color: #fff;
}

<head>
  <title>To-do List</title>

  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500" rel="stylesheet">
</head>

<body>
  <div class="container">

    <header class="header">
      <input type="text" name="edit_name" placeholder="Edit Name">
    </header>

    <section class="to-do">
      <div class="input">
        <input type="text" name="add_todo" placeholder="Click To Add A New To-do">
      </div>

      <div class="output">
        <div class="todo_container">
          <input type="text" placeholder="Edit To-do" value="Todo #1"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        </div>

        <div class="todo_container">
          <input type="text" placeholder="Edit To-do" value="Todo #2"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        </div>
      </div>
    </section>

  </div>


  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script src="https://use.fontawesome.com/5840114410.js"></script>
</body>

Unable to remove section from task roster

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for showcasing several thumbnails simultaneously as you upload images on a webpage with HTML and JavaScript

Understanding the percentages of CSS in relation to other elements

How to resolve the error "TypeError: 'listener' argument must be a function" in Gulpfile.js?

Generate a navigation route based on the hierarchical relationship between parent and child elements

Utilizing the HTML5 Download attribute for linking to external files

Encouraging an iPhone user to save a favorite Asp.Net MVC developed webpage to their home screen

Tips for saving an image that has been dragged onto the browser locally

Error encountered in AngularJS: Unexpected POST request

The CSS grid-template-areas feature is not performing as anticipated

What is the best method to retrieve the initial element in a jQuery slider rotation?

The issue lies in the fact that the customization of the Ant Design theme is not being properly implemented

Steps for adding an array of JSON objects into a single JSON object

Incorrect legend colors in Highcharts pie chart

Is it possible that the mouseover event is only triggered once in jQuery?

Creating CSS styles to ensure text takes up the largest size possible without wrapping or extending beyond the screen borders

The form keeps getting submitted non-stop on Internet Explorer browser

"Utilizing JavaScript to filter JSON data at a deep nested

How is the same-domain policy applied to popup windows that have JavaScript enabled in the URL?

Here’s a guide on accessing variable values from different JavaScript files in Nuxt.js

Centering the Navbar in Bootstrap 3.0