请大家再看下这个有什么问题

ZrdZz
  • 256
<ul id="ul">
    <li>sdgd</li>
    <li>dvsv</li>
    <li>dscs</li>
</ul>
<script type="text/javascript">
var li = document.getElementsByTagName('li');
var ul = document.getElementById('ul');
for(var i = 0;i < li.length;i++){
    li[i].index = i;
     li[i].onmouseover = function(){
          this.onclick = function(){
         ul.removeChild(ul.childNodes[this.index]);
          }
        }
}

可以删除li但不是我点击的那个,请问这是怎么回事?

回复
阅读 1.3k
6 个回答

因为每个li之间是有空白子节点的,所以没效果的情况是你删除了空白节点,一般再点一下你会发现又可以删了

你想实现点击删除某个li?那为什么要套在一个onmouseover里面,而且为什么要那么复杂

var li = document.getElementsByTagName('li');
for(var i = 0;i < li.length;i++){
    li[i].onclick= function(){
         this.remove();
    }
}
dubq
  • 3
新手上路,请多包涵

上面的问题出现在当li元素删除时,li元素的数量就会减少,li.length,this.index也就发生了变化;可以在for遍历中从后往前即可:

for(var i= li.length-1; i>-1; i--) {
...
}

正确思路是把事件绑定到li元素的父级ul上,当鼠标点击到要删除的li元素时,鼠标事件会从li传递到父级ul上,再通过事件对象event.target获取当前点击的li元素,如下:

...
<script>
var ul = document.getElementById('ul');
ul.onclick = function(e) {
    var e = e || e.target;
    var target = e.srcElement || e.target;
    this.removeChild(target)
}
</script>

需要了解js事件代理,冒泡机制,以及js事件对象

看一段你的代码:

li[i].onmouseover = function(){
    this.onclick = function(){
    ul.removeChild(ul.childNodes[this.index]);
  }
}

其中ul.childNodes 返回的是 子节点的集合

而节点包括:

  • 文本节点

  • 属性节点

  • 元素节点

所以ul.removeChild()移除肯定会出现错误

如果要按照你的逻辑来,可以这么写:

li[i].onmouseover = function(){
    var that = this;
    this.onclick = function(){
        ul.removeChild(that);//或者 that.remove();
    }
}

js中的一种特别的方式去实现这个功能 (这个完全是js设计模式的一种模式——命令模式)

倘若对代码进行优化的话,代码可以这样写:

<script>
var ul = document.getElementById('ul');
ul.addEventListener('click',function (e) {
        var e = e || e.target;
        var target = e.srcElement || e.target;
        this.removeChild(target)
    },false)
</script>

或许这样可以:

<script>
var ul = $('ul');
var i=0;
ul.ready(function(e){
var e = e || e.target;
var target = e.srcElement || e.target;
target.index=i;
i++;
})
ul.click(function(e) {
var e = e || e.target;
var target = e.srcElement || e.target;
this.removeChild(target);
target.nextAll.index ++;
})
</script>
你知道吗?

宣传栏