来,玩个抽积木的游戏!
有如下:积木A、B、C,假设 A、B、C由下到上排列,随意分 3 次,抽出这3块积木(点击按钮,删除这个按钮本身 )
<div id="test">
<button>积木A</button>
<button>积木B</button>
<button>积木C</button>
</div>
先 jQuery
随便怎么抽都可以。
$("#test button").click(function(){
$(this).remove();
});
再 JS
很显然,由上到下C、B、A抽出,也没有问题。
换个抽法,先抽 积木A,成功;
再抽积木 B,发现抽出的是 C,
最后抽 积木 B,成功报错: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
点解呢???!
var btns = document.getElementById("test").getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].index = i ;
btns[i].onclick = function(){
this.parentNode.removeChild(btns[this.index]);
}
}
其实,这里每块积木的index,会随着抽取不断变化的,像你在食堂打饭,本来排在第二,前面的打完走了,你就第一了,但你非得等着食堂阿姨叫第二个来打饭,自然会有问题!
小学课本上,有个更准确的形容词,叫刻舟求剑!
所以,如果你哪里想抽,抽哪里,那么,只能每一次抽出之前,先重新标记一遍,再去抽!
var btnWrap = document.getElementById("test");
btnWrap.onclick = function(e){ //btnWrap.addEventListener("click",function(e){
var blocks = btnWrap.getElementsByTagName("button");
for (var i = 0; i < btnWrap.children.length; i++) {
btnWrap.children[i].index =i;
}
e.target.parentNode.removeChild(blocks[e.target.index]);
//这里不能用 this.parentNode | this.index ,this 指的是 #test
};