2
信息：我是編程的新手&試圖創建待辦事項列表。在按下創建列表按鈕時，動態創建一個包含類別包裝的div，其中包含兩個其他div：1）來自具有類「item」的用戶的輸入。 2）用class ='fa fa-trash'刪除圖標。所有這些單獨的換行div都包含在class =「list」的主div內JQuery代碼沒有刪除相關的動態添加字段時，點擊刪除圖標
預期的o/p：我想要的是，點擊刪除圖標（class =「fa fa-trash」）整個與類相關聯的div =「包裝」被刪除，即一個列表項被刪除
當前O/p：不管我嘗試通過單擊刪除圖標，它會永遠刪除，刪除（從列表中），它包裹最古老的包裝添加
請讓我知道爲什麼點擊刪除圖標，它不會刪除相應的包裝，而是刪除最舊的添加項目（包裝）。
jQuery代碼：
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>樣品：http://jsbin.com/magikewuge/edit?html,css,js,output
我的例子中沒有看到任何錯誤：刪除圖標正確刪除其父，沒有任何問題。但是，您的代碼存在語義問題：您正在複製ID「dynamic」，並記住ID在文檔中必須是唯一的。 – Terry