How to add a remove link for an image preview?

[oldcastlehq]

Hi,

Help needed please. I need a multiples images uploader with preview and a delete button for the previewed images. Most of the solutions on the Internet use jQuery, which I cannot use. So, how can I add a remove option(link) to the preview images? This is what I got so far https://jsfiddle.net/oldcastle/eghmav75/1/

[sitek94]

Hi there

For each new photo you could append a div with img and button.

So your reader.onload could look like this:

reader.onload = e => {
  const div = document.createElement('div')
  const img = document.createElement('img')
  const button = document.createElement('button')
              
  img.src = e.target.result
  img.width = 200
  img.height = 200
  img.alt = `file-${++count}`

  button.textContent = "Delete"
  button.addEventListener('click', () => {
    preview.removeChild(div)
  })
       
  div.appendChild(img)
  div.appendChild(button)
       
  preview.appendChild(div)
}

[oldcastlehq]

Thanks, but the code doesn’t fully work. It removes the image from the dom, but it still submits the images that I deleted. How to fix that?