Wrong image previews being deleted after changing markup

I have a file-upload field (multiple files enabled). I’m trying to change the markup used when an image is previewed. By default, it is a div then two img containers (one for the image, one for the delete icon).

I have changed it to: a which has the image as its background-image, and a

inside that span containing the delete icon.

By default, the deletion of the preview images works fine (before changing the markup), however when changing to my markup, when you click delete on for example the second image, the first image is deleted instead. At all times, the top image is removed each time you click the delete icon.

As you will see, markup still has the onclick=“gformDeleteUploadedFile” etc inside too. I don’t see any particular reason this may be happening. I’ve provided a Gist of the code I am using:

As mentioned, when clicking the delete icon on my new markup, the gformDeleteUploadedFile does get triggered, just on the wrong image which is strange, considering it has the “this” it should be deleting that dom object you’ve clicked on.

I will try make a screencast of the issue happening and update this post.