In jQuery I want to be able to add and remove an element. I got the code for appending an element. Now I want to remove that same element when I click on it.

What is the best way to make this so called ToDo list in jQuery?

$(document).ready(function () {
    $("#add").click(function () {
        var newToDo = $("#newToDo").val();
        if(newToDo.length > 0){
            $("#toDoList").append("<p>" + newToDo + "</p>");
            $("#newToDo").val(" ");
        }
    });
});

<h1>Todo list</h1>
<form name="form" action="#">
    <input id="newToDo" type="text" name="in">
    <button id="add">Add!</button>
</form>
<div id="toDoList"></div>

In jQuery I want to be able to add and remove an element. I got the code for appending an element. Now I want to remove that same element when I click on it.

What is the best way to make this so called ToDo list in jQuery?

$(document).ready(function () {
    $("#add").click(function () {
        var newToDo = $("#newToDo").val();
        if(newToDo.length > 0){
            $("#toDoList").append("<p>" + newToDo + "</p>");
            $("#newToDo").val(" ");
        }
    });
});

<h1>Todo list</h1>
<form name="form" action="#">
    <input id="newToDo" type="text" name="in">
    <button id="add">Add!</button>
</form>
<div id="toDoList"></div>

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 4, 2017 at 22:22 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Oct 4, 2017 at 22:14 Kevin TabakKevin Tabak 1911 gold badge11 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You should use event delegation to attach event to dynamically created elements like :

$("#toDoList").on('click', 'p', function() {
    $(this).remove();
});

NOTE : Any button tag inside a form will be considered as submit button so it will refresh you page, to avoid that you should add type="button" to your button, like :

<button type="button" id="add">Add!</button>

Hope this helps.

$(document).ready(function() {
  $("#add").click(function() {
    var newToDo = $("#newToDo").val();
    if (newToDo.length > 0) {
      $("#toDoList").append("<p>" + newToDo + "</p>");
      $("#newToDo").val(" ");
    }
  });
  
  $("#toDoList").on('click', 'p', function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Todo list</h1>
<form name="form" action="#">
  <input id="newToDo" type="text" name="in">
  <button type="button" id="add">Add!</button>
</form>
<div id="toDoList"></div>

You can simply store the element in a variable:

$(document).ready(function () {
    $("#add").click(function () {
        var newToDo = $("#newToDo").val();
        if(newToDo.length > 0){
            var anotherToDo = $("<p>" + newToDo + "</p>");
            $("#toDoList").append(anotherToDo);
            $("#newToDo").val(" ");

            // later when you want to delete it
            anotherToDo.remove();
        }
    });
});

Or give it an ID and then remove it using that:

$(document).ready(function () {
    $("#add").click(function () {
        var newToDo = $("#newToDo").val();
        if(newToDo.length > 0){
            var anotherToDo = $("<p>" + newToDo + "</p>").attr('id', '#someid');
            $("#toDoList").append(anotherToDo);
            $("#newToDo").val(" ");

            // later when you want to delete it
            $('#someid').remove();
        }
    });
});

Looks like it's already been answered for you, but here's an easy way to do what you want in jQuery:

// external.js
$(function(){

var todo = $('#todo');
function todos(){
  $('#todos>li').click(function(){
    todo.val($(this).text());
  });
}
function remove(){
  $('#todos>li').remove(":contains('"+todo.val()+"')");
}
function add(){
  var tv = $.trim($('#todo').val());
  if(tv !== ''){
    remove(); $('#todos').append('<li>'+tv+'</li>'); todos(); todo.val('');
  }
}
todo.focus(function(){
  todo.val('');
});
$('#frm').submit(function(e){
  add(); e.preventDefault();
});
$('#add').click(add);
$('#rmv').click(function(){
   remove(); todos();
});

});

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:940px; padding:20px; margin:0 auto;
}
label{
  margin-right:4px;
}
#todos>li{
  cursor:pointer;
}

<!DOCTYPE html>
<html xmlns='http://www.w3/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Add Remove to List - jQuery</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='external.js'></script>
  </head>
  <body>
    <div class='main'>
    <form id='frm' name='frm'>
      <label for='todo'>New To Do</label><input id='todo' name='todo' type='text' /><input id='add' name='add' type='button' value='add' /><input id='rmv' name='rmv' type='button' value='remove' />
    <ol id='todos'></ol>
    </form>
    </div>
  </body>
</html>

It the New To Do input (without the quotes, of course): Type "Go to the Store". Hit Enter. Type "Do my Hair". Hit Enter. Type "Go on a Bike Ride". Hit Enter. Click on the list now where you want to remove then press the remove button. If it was an accident, you can press add again, but focusing on the input clears the text, for your next input, with this design. It's also form ready for database implementation.