How to add a remove link for an image preview?


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

Hi there :wave:

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 =
  img.width = 200
  img.height = 200
  img.alt = `file-${++count}`

  button.textContent = "Delete"
  button.addEventListener('click', () => {

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?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.