Javascript unable to delete dynamically created elements

Question

I am trying to make/write a JS event handler that perform somethings when image is click from a list of images. For this i have pasted the div I am targeting and Js code to go along with it. I just want that when an image is clicked it displays its info and below, when second image is clicked its info is displayed (overwriting the description of previous images) and so on. My code:

 window.onload = function () { var links = document.getElementsByClassName('a'); for (var i = 0; i < links.length; i++) { links[i].addEventListener('click', function (e) { // Hide results document.getElementById('placeholder').style.display = 'none'; // Show loader document.getElementById('loading').style.display = 'block'; if (document.getElementById('imagedescription')) { // imagedescription = document.getElementById('imagedescription') // placeholder.parentNode.removeChild(imagedescription) document.getElementById('imagedescription').style.display = 'none' } setTimeout(() => showpic(this), 2000); e.preventDefault(); }); } function showpic(pic) { document.getElementById('loading').style.display = 'none'; var imagedescription = document.createElement('div'); imagedescription.setAttribute('id', 'imagedescription'); var desctext = document.createTextNode(''); imagedescription.appendChild(desctext); document.getElementById('placeholder').style.display = 'block'; var source = pic.getAttribute('href'); var placeholder = document.getElementById('placeholder'); placeholder.setAttribute('src', source); if (pic.getAttribute('title')) { var text = pic.getAttribute('title'); } else { var text = ''; } if (text == "1") { prob = '1' aces = 1 arks = 5 results = { something:'55', something1:'44', something2:'556' } } else if (text == "2") { prob = '1' aces = 1 arks = 5 results = { something:'55', something1:'44', something2:'556' } } else if (text == "3") { prob = '1' aces = 1 arks = 5 results = { something:'55', something1:'44', something2:'556' } } else if (text == "4") { prob = '1' aces = 1 arks = 5 results = { something:'55', something1:'44', something2:'556' } } else { prob = 'Probability 95%' faces = 1 landmarks = 5 results = { nose: '(303, 131)', mouth_right: '(313, 141)', right_eye: '(314, 114)', left_eye: '(291, 117)', mouth_left: '(296, 143)' } } test = `<button type="button" class="btn btn-primary" style="margin-right: 10px;"> <span class="badge">${prob}</span></button> <button type="button" class="btn btn-success" style="margin-right: 10px;">aces <span class="badge">${aces}</span></button><button type="button" class="btn btn-danger">arks <span class="badge">${arks}</span></button><br /> <span class="badge badge-info">something: ${results.something}</span> <br /> <span class="badge badge-info">something1: ${results.something1}</span> <span class="badge badge-info">something2: ${results.something2}</span> <br /> <span class="badge badge-info">something2: ${results.something2}</span> <span class="badge badge-info">Lefted: ${results.something}</span> <br />` test1 = `` var imageDescription_d = document.createElement('div'); imageDescription_d.setAttribute("id", "imageDescription_d"); var imageDescription_d2 = document.createElement('div'); imageDescription_d2.setAttribute("id", "imageDescription_d2"); if (imagedescription.firstChild.nodeType == 3) { imagedescription.firstChild.nodeValue = text; imageDescription_d.innerHTML = test imageDescription_d2.innerHTML = test1 } // imageDescription_d2.innerHTML = test1 placeholder.parentNode.appendChild(imagedescription); imagedescription.parentNode.insertBefore(imageDescription_d, imagedescription.nextSibling); imageDescription_d.parentNode.insertBefore(imageDescription_d2, imageDescription_d.nextSibling); return false; } }

 #loading { display: none; } #imagegallery { display: inline-block } #results { display: none; }

 <div id="content"> <h3>Select Images Below</h3> <ul id="imagegallery" , style="padding-bottom: 20px;"> <li> <a class='a' href="./img/team/t1.jpg" title="Black Man in Glasses" onclick="" style="padding-right: 10px; padding-left: 95px;"> <img src="./img/team/t1.jpg" height="75px" width="75px" alt="the band in concert" /> </a> </li> <li> <a class='a' href="./img/team/t2.jpg" title="White Man in Glasses" style="padding-right: 10px;"> <img src="./img/team/t2.jpg" height="75px" width="75px" alt="the bassist" /> </a> </li> <li> <a class='a' href="./img/team/t3.jpg" title="Brown Women" style="padding-right: 10px;"> <img id='image' src="./img/team/t3.jpg" height="75px" width="75px" alt="the guitarist" /> </a> </li> <li> <a class='a' href="./img/team/t4.jpg" title="White Women" style="padding-right: 10px;"> <img id='image' src="./img/team/t4.jpg" height="75px" width="75px" alt="the audience" /> </a> </li> </ul> <div> <img id='placeholder' , src="./img/resources/neutral_1.jpg" , height="450px" width="550px" alt="Image gooes here" , style="margin-bottom: 50px;padding: 10px;"> </div> <div id="loading"> <img src="img/loading.gif" height="450px" width="550px" alt=""> </div> <!-- <div id="show"> <h1 id='h'>It works</h1> </div> --> </div> </div>

Everything works except that it appends the details ie instead of replacing imagedescription_d & imagedescription_d2 it create new and append to them. I implemented various checks that if it exits delete it or empty it but none worked. Any help? Where I am wrong in?

Answer 1

your code and way of thinking are a bit messy. you need to work with simple methods that utilize the most of the HTML capabilities and is scalable. if things get long and complicated always search for another simpler way, chances are there is one.

I wrote you a POC of what you wanted to happen with data tags and innerHTML :

 const description = document.querySelector(".description"); const descriptions = { img0: "hay im text", img1: "hay im anouther text" }; document.addEventListener("click", (e) => { if (e.target.getAttribute("data-description")) { description.innerHTML = "loading"; setTimeout(() => { description.innerHTML = descriptions[e.target.getAttribute("data-description")]; }, 2000); } });

 .img-btn { margin: 10px; color: blue; cursor: pointer; } .description { margin: 10px; }

 <div class="img-btn" data-description="img0">img 1</div> <div class="img-btn" data-description="img1">img 2</div> <div class="description"></div>