Multiply elements with JavaScript

Make 1 box appear on the page 4 times with JavaScript

by Haze32

HTML

<div class="box">
I am a box.
</div>

CSS

To remove the uploaded image from being submitted, you will need to modify the handleClick() function of the #closeBtn. Here are the steps you can follow to achieve this:

    Add a data-index attribute to the #closeBtn element to store the index of the row it belongs to:

    html

<div id="closeBtn" class="closeBtn cta deleteRow" data-index="${i}">DELETE PHOTO</div>

Modify the handleClick() function to remove the image from the list of files to be submitted. You can achieve this by storing the file object of each image in an array and removing the file object of the corresponding image when the delete button is clicked:

javascript

const fileObjects = []; // store file objects here

async function handleFiles(files) {
  // ...
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    // ...
    fileObjects.push(file); // add file object to array
  }
  // ...
}

function handleClick() {
  const index = this.getAttribute('data-index');
  fileObjects.splice(index, 1); // remove file object at index
  this.closest('.previewRow').remove(); // remove row from HTML
  const numb = document.getElementById('photoPreviewsWrap').children.length;
  document.getElementById('photoCount').innerHTML = numb;
  if (numb === 0) {
    document.getElementById('submitPhotos').style.display = 'none';
  }
}

Update the event listener for the #closeBtn to call the modified handleClick() function:

javascript

    const closeBtns = document.querySelectorAll('.closeBtn');
    closeBtns.forEach((btn) => {
      btn.addEventListener('click', handleClick);
    });

By making these changes, you will be able to remove the image from the list of files to be submitted when the delete button is clicked.

JavaScript

this javascript is has a form with a input to upload multiple images. there is also a wordpress php page that is handling the submission. need to add functionality to the #closeBtn to not only delete the image row in html but more importanly remove the image and from being submitted 
/**
 * BXTV Photo Upload
 */

export default class BxtvPhoto {
	initBxtvPhoto() {
		async function handleFiles(files) {
			const previewDiv = document.getElementById('photoPreviewsWrap');
			const promises = [];
			function renderPhotoRow(imageName, imgSrc, i) {
				const previewRow = document.createElement('div');
				previewRow.className = 'previewRow';

				let content = '';
				content += `
				  <div class="topRow">
					<div class="title">${imageName}</div>
				  </div>
				  <div class="rowContent">
					<div class="leftCol">
					  <div class="colWrapLeft"><img src="${imgSrc}"></div>
					</div>
					<div class="rightCol">
					  <div class="colWrapRight">
						<div id="closeBtn" class="closeBtn cta deleteRow[${i}]">DELETE PHOTO</div>
						<div class="bxInputRow">
						  <div class="bxInputLeft">
							<label for="peopleIn">People in the Photo</label>
						  </div>
						  <div class="bxInputRight">
							<input type="text" id="peopleIn" name="peopleIn[]" placeholder="From left to right (please comma separate names)" required >
						  </div>
						</div>
						<div class="bxInputRow">
						  <div class="bxInputLeft">
							<label for="descriptions">Description</label>
						  </div>
						  <div class="bxInputRight">
							<textarea id="descriptions" name="descriptions[]" style="height:100px" placeholder="Complete context of the story shown in the photo (limit of 280 characters)" required ></textarea>
						  </div>
						</div>
						<div class="bxInputRow">
						  <div class="bxInputLeft">
						  </div>
						  <div class="bxInputRight">
							<input type="checkbox" id="allowOn" name="allowOn[${i}]" value="1"/>
							<label for="allowOn">Allow BX social media...