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>Aquí, el usuario subirá imágenes de cuantas quiere y cuando las necesite. Si no lo necesitan, haga clic en el botón Eliminar que solo eliminó el último archivo. Necesito eliminar el último campo de entrada de archivo cada vez que hago clic en el botón Eliminar. No estoy incluyendo eso todavía.
Debe usar el método addEventListener en delButton y escuchar el evento de click , de modo que cuando se haga clic en el botón, pueda eliminar delbutton (siendo el elemento de destino en el que se hace clic), preview (elemento hermano anterior de delButton) y newInput (siguiente elemento hermano de delButton) usando el método .remove() . simplemente use el método .remove() en cualquier elemento que desee eliminar cuando se ejecute el evento de clic en delButton.
Puede que desee obtener más información sobre los detectores de eventos de J avaScript .
A continuación se muestra un ejemplo:
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>