<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="outer_text">
<input id="con_value">
<button class="btn">增加</button>
<button class="btn">拷貝</button>
<button class="btn">洗掉</button>
<div id="inner_text"></div>
</div>
</body>
<script>
var inp_out = document.getElementById("con_value");
var btn_cla = document.getElementsByClassName("btn");
var div_inr = document.getElementById("inner_text");
function addText(){
var op = document.createElement('p');
var ob = document.createElement('button');
ob.innerHTML = 'x';
ob.setAttribute('class','btn2');
op.innerHTML = inp_out.value;
div_inr.appendChild(op);
op.appendChild(ob);
inp_out.value = '';
}
function removeBtn2(){
var op2 = this.parentNode;
op2.parentNode.removeChild();
}
btn_cla[0].onclick = addText;
var p1 = document.getElementsByTagName('p');
//var b1 = p1.getElementsByClassName('btn2');
for(var i=0;i<p1.length;i++){
p1[i].getElementsByClassName('btn2')[0].onclick = function(){
//this.parentNode.removeChild(this.parentNode)
console.log(this)
}
}
</script>
</html>
本來的意思是要點擊添加的<p>標簽中的x按鈕洗掉此行，但是點擊x按鈕沒反應，這是為什么？是因為不能用添加的節點呼叫方法嗎，還是我的代碼哪里寫錯了？？
uj5u.com熱心網友回復：
主要問題是你給洗掉按鈕注冊監聽事件的地方不對。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="outer_text">
<input id="con_value">
<button class="btn">增加</button>
<button class="btn">拷貝</button>
<button class="btn">洗掉</button>
<div id="inner_text"></div>
</div>
</body>
<script>
var inp_out = document.getElementById("con_value");
var btn_cla = document.getElementsByClassName("btn");
var div_inr = document.getElementById("inner_text");
function addText(){
var op = document.createElement('p');
var ob = document.createElement('button');
ob.innerHTML = 'x';
ob.setAttribute('class','btn2');
op.innerHTML = inp_out.value;
div_inr.appendChild(op);
op.appendChild(ob);
inp_out.value = '';
ob.onclick = function() { // <====注冊事件添加在這里
ob.closest('p').remove();
}
}
function removeBtn2(){
var op2 = this.parentNode;
op2.parentNode.removeChild();
}
btn_cla[0].onclick = addText;
</script>
</html>
uj5u.com熱心網友回復：
<script>
var inp_out = document.getElementById("con_value");
var btn_cla = document.getElementsByClassName("btn");
var div_inr = document.getElementById("inner_text");
function addText(){
var op = document.createElement('p');
var ob = document.createElement('button');
ob.innerHTML = 'x';
ob.setAttribute('class','btn2');
op.innerHTML = inp_out.value;
div_inr.appendChild(op);
op.appendChild(ob);
inp_out.value = '';
ob.onclick = function(){
div_inr.removeChild(this.parentNode);
}
}
function removeBtn2(){
var op2 = this.parentNode;
op2.parentNode.removeChild();
}
btn_cla[0].onclick = addText;
</script>
uj5u.com熱心網友回復：
con_value 可能是個const 型別的量，會被系統保護？ 物件自釋放可能會受限制？現在大多數系統都不支持物理洗掉資料，物件釋放都是延遲進行的，類似操作都只是由系統進行標記，等到系統維護時序再執行有關操作。
另外，有時候改變顯示元素需要重寫顯示代碼（增添顯示元素時不需要，但是減少顯示元素時這個操作很重要）。需要知道，運行的程式都在快取中，系統很少會重復裝載、卸載代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/27089.html
標籤：JavaScript
上一篇：JDBCTemlate