Information: Ich bin neu in der Programmierung & versucht, eine To-Do-Liste zu erstellen. Beim Drücken der Schaltfläche "create list" wird dynamisch ein div mit Klassenumbruch erstellt, das zwei andere divs enthält: 1) Eingabe vom Benutzer mit der Klasse "item". 2) Löschen Sie das Symbol mit class = 'fa fa-trash'. Alle diese einzelnen Wrap Divs sind in einem Master Div mit Klasse = "Liste" enthaltenJQuery Code löscht das zugehörige dynamisch hinzugefügte Feld nicht, wenn auf das Löschen-Symbol geklickt wird
Erwartet o/p: Was ich will ist, dass beim Klicken auf das Löschen-Symbol (Klasse = "fa fa-trash") das gesamte zugeordnet div mit class = „wrap“ wird gelöscht, dh ein listitem gelöscht wird
Aktuelle o/p: Unabhängig davon, welche Wrap ich versuche, (aus der Liste) zu löschen, indem sie auf das löschen-Symbol klicken, wird es immer löschen ältester Wickel hinzugefügt.
Bitte lassen Sie mich wissen, warum beim Klicken auf das Löschen-Symbol nicht die entsprechende Umbruch löschen und stattdessen den ältesten hinzugefügten Artikel (Umbruch) löschen.
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">'; //every item i/p by user is in class item
var deleteicon = '<div class="fa fa-trash">';
var wrap = '<div class="wrapper" id="dynamic">';//to wrap the deleteicon & user i/p in a div
$(document).ready(function(){
\t $('#createlistbutton').click(function(){
\t \t var toAdd = $('input[name=newlistitem]').val(); //i/p from user
if(count<maxvalue)
{
$('.list').append(wrap + listitem +toAdd + '</div>' + deleteicon + '</div>' +'</div>');//dynamic adding item
count +=1;
}
else
{
alert("Not more than 9 list can be created");
}
$('.fa.fa-trash').on('click',function(){
$(this).parent().remove();//delete parent item(wrap) when clicked on deleteicon
count -= 1;
});
});
});-*{ margin:0;
\t padding:0;
\t }
body{
display: flex;
flex-direction:column;
font-family: "Times New Roman","Open Sans",sans-serif;
font-size: 16px;
/**background: linear-gradient(45deg, #f06, yellow);**/
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;
\t }
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">
\t \t <input type="text" name="newlistitem"/>
\t </form>
\t <button id="createlistbutton">Create List</button>
</div>
<br/>
<div class="list">
\t </div>
</div>
</main>
<footer>
<p>COPYRIGHT © 2017 PowerSoft</p>
</footer>
</body>
</html>Probe: http://jsbin.com/magikewuge/edit?html,css,js,output
Ich sehe nichts falsch in Ihrem Beispiel: das Löschen-Symbol löscht sein Eltern korrekt ohne irgendein Problem. Es gibt jedoch semantische Probleme mit Ihrem Code: Sie duplizieren die ID "dynamisch" und denken daran, dass IDs in einem Dokument eindeutig sein müssen. – Terry