JS 绑定 - 刻舟求剑

来，玩个抽积木的游戏！ 

有如下：积木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	
};