使用javaScript函數onclick div替換HTML內容？

Question

我有下面的代碼片段，它將輸出HTML ，但我想將文本A0100和A0102作為組合字符串

 function closespan(val) { var parent = val.parentElement; parent.parentElement.removeChild(parent); var valHTML = document.getElementById("lblshowselected").innerHTML; var valSPLIT = valHTML.replace(/<img src="images\\/delete.png" height="10">/, ","); var valTEXT = valSPLIT.innerText; } 

 <div runat="server" id="lblshowselected"> <div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> <div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> </div> 

產量
valHTML： "<div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div><div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div>"

預期產出

A0100，A0102

Answer 1

您需要使用getElementsByClassName()獲取tknz-token元素並迭代以在數組中獲取push textContent 。

這是一個例子，我只添加了代碼來獲取textContent 。

 function closespan(val) { //Modified code var lbl = document.getElementById("lblshowselected"); var arr = []; var tokens = lbl.getElementsByClassName('tknz-token'); for (var i = 0; i < tokens.length; i++) { arr.push(tokens[i].textContent); } console.log(arr.join(',')); } 

 <div runat="server" id="lblshowselected"> <div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> <div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> </div> 

Answer 2

將文本添加為​​HTML而不是普通文本

 function closespan(val) { debugger; var parent = val.parentElement; parent.parentElement.removeChild(parent); var valHTML = document.getElementById("lblshowselected"); var valSPLIT = valHTML.replace(/<img src="images\\/delete.png" height="10">/, ","); valHTML.innerHTML(valSPLIT); } 

 <div runat="server" id="lblshowselected"> <div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> <div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> </div>