How can I add a small delete icon to the top right corner of each image while maintaining the original masonry layout? Below is the code after I modified the source code and the running effect of the code. However, after running, the images are no longer displayed in the masonry layout. How can I solve this issue?

[LetAmericaGreatAgain]

private addImagesToGallery(images: IMasonryGalleryImage[]): void { if (!this.grid) { throw Error( 'Grid element is not yet ready, are you trying to add image too soon?' ); }

const imagesWrapper = this.renderer.createElement('span');

images.forEach((image) => {
  const imgContainer = this.renderer.createElement('span');
  imgContainer.className = this.getImageClass() + ' imgSpan';

  // generate unique image id
  const imageId = this.getImageId();

  // create element
  const imageElem = this.renderer.createElement('img');
  imageElem.setAttribute('id', imageId);
  imageElem.setAttribute('alt', image.alt ? image.alt : 'no description');
  imageElem.setAttribute('src', image.imageUrl);
  // note - images are hidden by default and should be shown only after they are loaded
  imageElem.setAttribute(
    'style',
    `display: block; width: ${this.width}px; margin-bottom: ${this.verticalGutter}px`
  );
  // imageElem.className = this.getImageClass();
  imageElem.addEventListener('click', () => {
    this.handleClick(image);
  });

  // store guid with this image
  this.activeImages.push({
    id: imageId,
    image: image,
  });
  this.renderer.appendChild(imgContainer, imageElem);

  const deleteIconContainer = this.renderer.createElement('a');
  deleteIconContainer.href = '#';
  const deleteIcon = this.renderer.createElement('img');
  // deleteIcon.setAttribute('id', this.getImageId());
  deleteIcon.setAttribute('src', this.deleteIconBase64);
  deleteIcon.className = 'delete';
  this.renderer.appendChild(deleteIconContainer, deleteIcon);
  this.renderer.appendChild(imgContainer, deleteIconContainer);

  // add to dom and mansory & refresh layout
  this.renderer.appendChild(imagesWrapper, imgContainer);
});

// add html to dom
this.renderer.appendChild(this.grid, imagesWrapper);

// add images once they are loaded
const imgLoad = imagesLoaded(imagesWrapper);
imgLoad.on('progress', (instance, image) => {
  if (
    image &&
    image.isLoaded &&
    this.msnry &&
    this.msnry.appended &&
    this.msnry.reloadItems
  ) {
    // this.renderer.appendChild(this.grid, image.img);
    // unhide image
    // this.renderer.setStyle(image.img, "display", "block");

    // remove image from gallery
    this.msnry?.addItems?.([image.img]);

    // refresh layout
    this.msnry?.layout?.();
  }
});

}

.imgSpan { display: inline-block; position: relative; }

.imgSpan .delete { position: absolute; top: 0; right: 0; width: 16px; height: 16px; }