Delete option is not working in javascript createelement?

Question

 document.getElementById("add_image").onclick=function (ev) { var image=document.getElementById("images"); var preview=document.createElement("img"); preview.style.width="auto"; preview.style.height="100px"; var newInput=document.createElement("input"); newInput.type="file"; newInput.name="file[]"; var delbutton = document.createElement("button") delbutton.appendChild(document.createTextNode("delete")); var br=document.createElement("br"); var br1=document.createElement("br"); newInput.onchange=function (ev1) { if(this.files && this.files[0]){ var fileReader=new FileReader(); fileReader.onload=function (ev2) { preview.src=ev2.target.result; }; fileReader.readAsDataURL(this.files[0]) } }; image.appendChild(preview); image.appendChild(delbutton); image.appendChild(newInput); image.appendChild(br); image.appendChild(br1); }

 <div> <h1>Add Product</h1> <input type="text"><br><br> <div id="images"> <input type="file" name="file[]"><br><br> </div> <button type="button" id="add_image">+Add Image</button><br><br> </div>

Here, The user will upload images of how many they want and whenever they need. If they don't need and click the delete button that the last file only deleted. I need to delete the last fileinput field whenever I click the delete button. I am not including that yet.

Answer 1

You have to use addEventListener method on delButton and Listen to click event, So that when button is clicked, you could delete delbutton ( being the target element that is clicked), preview (previus sibling elemnt of delButton), and newInput (next sibling element of delButton) using .remove() method. just use .remove() method on whatever element you want to delete when click event on delButton is run.

You may like to learn more about J avaScript event listeners .

Below is an example:

 document.getElementById("add_image").onclick=function (ev) { var image=document.getElementById("images"); var preview=document.createElement("img"); preview.style.width="auto"; preview.style.height="100px"; var newInput=document.createElement("input"); newInput.type="file"; newInput.name="file[]"; var delbutton = document.createElement("button") delbutton.appendChild(document.createTextNode("delete")); var br=document.createElement("br"); var br1=document.createElement("br"); newInput.onchange=function (ev1) { if(this.files && this.files[0]){ var fileReader=new FileReader(); fileReader.onload=function (ev2) { preview.src=ev2.target.result; }; fileReader.readAsDataURL(this.files[0]) } }; image.appendChild(preview); image.appendChild(delbutton); image.appendChild(newInput); image.appendChild(br); image.appendChild(br1); //Follow is the answer delbutton.addEventListener("click", function(event) { event.target.previousSibling.remove(); event.target.nextSibling.remove(); event.target.remove(); }); }

 <div> <h1>Add Product</h1> <input type="text"><br><br> <div id="images"> <input type="file" name="file[]"><br><br> </div> <button type="button" id="add_image">+Add Image</button><br><br> </div>