How do I remove a appended element with jQuery?
Question
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>
3 answers
solution1
2 ACCPTED 2017-10-04 22:20:30
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.com/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>
solution2
0 2017-10-04 22:28:57
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();
}
});
});
solution3
0 2017-10-04 22:52:05
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.org/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.com/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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.