我想要的效果是:
1、在文本框里输入内容,然后点击添加按钮,在指定的UI下面添加LI;
2、通过点击LI里的“删除”文字;可以删除当前添加的这个“LI”节点;
遇到的问题:第一个效果已经实现了,但是第二个效果我试了好久都没得行。不知道哪里写错了,求大神帮我看一下;最好能说明一下我的问题出在哪里,用哪种方法可以解决。谢谢哈;
下面是我的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.oli{
width: 300px;
height: 35px;
color: #FFFFFF;
background-color: #004488;
margin-bottom: 1px;
padding-left: 20px;
line-height: 35px;
}
a:link{
color: #FFFFFF;
}
a:hover{
color: #ff0099;
}
</style>
<script>
window.onload = function(){
var oul_b1 = document.getElementById('oul_1');
var oBat_a2 = document.getElementById('bat_a2');
oBat_a2.onclick = function(){
var oli_b1 = document.createElement('li');
var text_b2 = document.getElementById('text_a2');
oli_b1.innerHTML = text_b2.value + " <a href='javascript:;'>删除</a>";
oul_b1.appendChild(oli_b1);
//下面的代码是给添加的li加一个class样式
var calss_li = oul_b1.getElementsByTagName('li');
for(var i=0;i<calss_li.length;i++){
//alert(calss_li[1].innerHTML);
calss_li[i].className = 'oli';
};
//
//下面是删除添加的li
var del_li = document.getElementsByTagName('a');
alert('dsaf');
for(var j=0;j<del_li.length;j++){
//alert(del_li.innerHTML);
del_li[i].onclick = function(){
alert('ada');//测试
oul_b1.removeChild(this.parentNode); //删除oul_b1的子节点
}
};
};
//
}
</script>
</head>
<body>
<input type="text" value="" id="text_a2" />
<input type="button" value="添加LI" id="bat_a2" />
<ul id="oul_1">
</ul>
</body>
</html>
前面有很多人说的错误,我只是给个一个推荐,看看基于vue.js的你这个需求的写法:http://cn.vuejs.org/guide/ 很干净简洁
核心部分我稍微做了点改动:
window.onload = function(){
var oul_b1 = document.getElementById('oul_1');
var oBat_a2 = document.getElementById('bat_a2');
oBat_a2.onclick = function(){
var oli_b1 = document.createElement('li');
var text_b2 = document.getElementById('text_a2');
oli_b1.innerHTML = text_b2.value + " <a href='javascript:;'>删除</a>";
oul_b1.appendChild(oli_b1);
//下面的代码是给添加的li加一个class样式
var calss_li = oul_b1.getElementsByTagName('li');
for(var i=0;i<calss_li.length;i++){
calss_li[i].className = 'oli';
};
//首先,添加完之后可以直接通过querySelector获取刚才添加的a标签
//这里循环是没必要的,而且你的循环会导致之前已经绑定过删除事件的元素又被绑一遍
//虽然没什么他错,但却是无用功
oli_b1
.querySelector('a')
.addEventListener('click', function(){
//然后就是这里的this指的是a标签,他的父节点才是li
//从ul里删除
oul_b1.removeChild(this.parentNode);
}, false);
};
}
这个要用事件代理
window.onload = function() {
document.getElementById('bat_a2').onclick = function(){
var val = document.getElementById('text_a2').value;
var text = '<li class="oli">' + val + " <a href='javascript:;'>删除</a></li>";
document.getElementById("oul_1").insertAdjacentHTML('beforeEnd', text);
}
document.getElementById("oul_1").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "A") {
document.getElementById("oul_1").removeChild(e.target.parentNode);
}
});
}
题主可能粗心,代码有一处错了。
源码循环中 i 改为 j,就好了。
for(var j=0;j<del_li.length;j++){
//alert(del_li.innerHTML);
//下面的i 改为 j 就好了
del_li[i].onclick = function(){
alert('ada');//测试
oul_b1.removeChild(this.parentNode); //删除oul_b1的子节点
}
};
删除部分代码需要采用事件代理的方式处理,你这样在onload绑定的事件只是对你现有的a标签有用,动态添加的标签并没有绑定事件,代理的方式也很简单,原理就是在现有的父元素绑定事件,通过冒泡来判断点击了哪里然后执行事件。
Jquery用on方法就可以实现。
remove会返回你删除的节点,你可以用一个变量保存它,之后在进行其他操作,比如说再添加回来