Information: I am currently navigating the world of programming and attempting to build a To-Do List feature. When the create list button is clicked, a dynamically generated div with the class 'wrap' is created. This div contains two nested divs: 1) user input field with the class 'item'. 2) Delete icon with the class 'fa fa-trash'. Each of these wrap divs is housed within a main div with the class "list".
Expected output: My goal is for when the delete icon (class="fa fa-trash") is clicked, the corresponding wrap div associated with it is deleted, effectively removing one list item.
Current output: Regardless of which wrap I try to delete from the list by clicking on the delete icon, it always deletes the oldest wrap that was added initially.
Please advise me on why, upon clicking the delete icon, it does not remove the intended corresponding wrap but rather deletes the oldest wrap that was added.
jQuery Code:
var maxvalue=9; //to restrict the number of list items created
var count = 0; //to count the number of list items created
var listitem = '<div class="item">'; //each user input is contained in this 'item' class
var deleteicon = '<div class="fa fa-trash">';
var wrap = '<div class="wrapper" id="dynamic">';//wraps the delete icon & user input within a div
$(document).ready(function(){
$('#createlistbutton').click(function(){
var toAdd = $('input[name=newlistitem]').val(); //user input
if(count<maxvalue)
{
$('.list').append(wrap + listitem +toAdd + '</div>' + deleteicon + '</div>' +'</div>');//adds dynamic item
count +=1;
}
else
{
alert("No more than 9 lists can be created");
}
$('.fa.fa-trash').on('click',function(){
$(this).parent().remove();//deletes parent item (wrap) when clicked on delete icon
count -= 1;
});
});
});-*{ margin:0;
padding:0;
}
body{
display: flex;
flex-direction:column;
font-family: "Times New Roman","Open Sans",sans-serif;
font-size: 16px;
background-color: #b9d2d4;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
height:100%;
}
h3{
color:white;
margin: 18 0 0 10;
display: inline-block;
}
.nav-bar{
height: 10%;
background-color:#303030;
}
ul{
list-style-type:none;
display: inline-block;
margin:0;
margin-right:15;
padding:0;
float:right;
overflow:hidden;
}
li{
float:left;
margin-top:5;
}
li a{
display:block;
text-decoration:None;
padding: 8px;
color:#ffffff;
padding: 14px 16px;
text-align:center;
}
li a:hover{
text-decoration:underline;
}
footer p{
margin-top:25px;
}
footer{
position:fixed;
left:0px;
bottom:0px;
height:10%;
width:100%;
color:#ffffff;
background:#303030;}
.sidepanel{
width:30%;
float:left;
text-align:center;
height:80%;
background-color:white;
}
.inputlist{
position:relative;
display:inline-block;
margin-top:1em;
margin-bottom: 1em;
}
#createlistbutton{
font-weight:bold;
color:#ffffff;
background-color:#303030;
}
form{
display:inline-block;
}
.item{
border: 1px solid grey;
background-color:lightcyan;
border-radius:15px;
margin-bottom:1em;
width=80%;
}
.fa.fa-trash{
display:inline-block;
}
.list{
position:inherit;
width=80%;
max-height:80%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
<title>Python Flask App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src-animation.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="nav-bar">
<h3>PYTHON FLASK APP</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</header>
<main>
<div class="sidepanel">
<div class="inputlist">
<form name="newlistform">
<input type="text" name="newlistitem"/>
</form>
<button id="createlistbutton">Create List</button>
</div>
<br/>
<div class="list">
</div>
</div>
</main>
<footer>
<p>COPYRIGHT © 2017 PowerSoft</p>
</footer>
</body>
</html>