Replace HTML content using javaScript function onclick div?

Question

I have the below snippet, which will output HTML , but I want texts A0100 and A0102 as combined string

 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> 

Output
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>"

Expected Output

A0100,A0102

Answer 1

You need to get the tknz-token elements using getElementsByClassName() and iterate to get push textContent in an array.

Here is an example, I have only added code to get the 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

Add your text as HTML instead of normal Text

 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>