极客观点
项目管理
HarmonyOS
html中原有节点<li class="token-input-token"></li>一个
通过append()方法，添加<li class="token-input-token"></li>苦干个
最后用remove()方法删除这些节点，发现原有节点可以删除，新增加的节点不能删除。
这是为什么？如何解决？
jsfiddle具体代码如下：
http://jsfiddle.net/vowmmm/zsj8d3gz/
原始代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.post-option {
padding: 10% 25%;
}
ul.token-input-list {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #FFFFFF;
border: 1px solid #D9D9D6;
border-radius: 2px;
margin: 0;
min-height: 32px;
padding: 0 4px;
z-index: 999;
}
ul.token-input-list li {
margin: 4px 0;
}
ul.token-input-list li input {
border: 0 none;
margin-top: 5px;
padding: 0;
width: 100%;
}
li.token-input-token {
background-color: #F3F3F0;
cursor: default;
font-size: 14px;
height: 28px;
line-height: 28px;
padding: 0 6px;
text-align: right;
white-space: nowrap;
}
li.token-input-token p {
display: inline;
float: left;
margin: 0;
}
li.token-input-token span {
color: #BBBBBB;
cursor: pointer;
font-weight: bold;
}
li.token-input-input-token {
padding: 0 4px;
}
ul.token-slidedown {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #FFFFFF;
border: 1px solid #D9D9D6;
border-radius: 2px;
margin: 0;
min-height: 32px;
z-index: 999;
}
ul.token-slidedown li {
cursor: default;
font-size: 14px;
line-height: 32px;
padding: 0 6px;
}
ul.token-slidedown li:hover {
background-color: #467B96;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script>
$(function() {
$('.token-slidedown li').on('click', function() {
var $token_value = $(this).find('span').text();
var $li = '<li class="token-input-token"><p>' + $token_value + '</p><span class="token-input-delete-token">×</span></li>';
$('.token-input-token:last').after($li);
});
$('.token-input-delete-token').on('click', function() {
$(this).parent().remove();
});
})
</script>
</head>
<body>
<div class="post-option">
<label class="label" for="tags">标签</label>
<p>
<ul class="token-input-list">
<li class="token-input-token">
<p>标签</p>
<span class="token-input-delete-token">×</span>
</li>
<li class="token-input-input-token">
<input type="text" id="tags" class="w-100">
</li>
</ul>
<ul class="token-slidedown hide">
<li><span>请输入标签名</span></li>
<li class="hide"><span></span></li>
</ul>
</p>
</div>
</body>
</html>
