添加/删除字段-文件上传javascript

Question

Folks, I'm trying to make a file upload form with add buttons and remove more fields for file upload. What happens is that when I fire the button, both add and remove, they do not find the divs that were cloned, so the add / remove function does not work in the cloned fields.

I put the code here as an example

 const $btnAdd = document.querySelectorAll('[data-js="btn-add"]'); const listBtnAdd = Array.from($btnAdd); const $btnRemove = document.querySelectorAll('[data-js="btn-remove"]'); const listBtnRemove = Array.from($btnRemove); const $rowAttach = document.querySelectorAll('[data-js="rowAttach"]'); const listRow = Array.from($rowAttach); let rows = listRow.map((row, i, arr) => { return row; }); listBtnAdd.map((btnAdd, i) => { btnAdd.addEventListener('click', function(e){ e.preventDefault(); console.log("button", btnAdd, i); const formItems = document.querySelector('[data-js="formAttach"]'); const copy = formItems.firstElementChild.cloneNode(true); formItems.appendChild(copy); }, false); }); listBtnRemove.map( (btnRemove, i)=> { btnRemove.addEventListener('click', function(e){ e.preventDefault(e); console.log('remove btn', btnRemove, i); }, false); }); <!-- begin snippet: js hide: false console: true babel: false --> 

 .row-attach { display: inline-block;margin-bottom: 20px } .row-attach fieldset {float: left; margin-right: 10px;border: 0;} .row-attach label {display: block;font-weight: bold;margin-bottom: 5px; } 

 <h3>Form</h3> <form enctype="multipart/form-data" action="/upload/image" method="post" data-js="formAttach"> <div class="row-attach" data-js="rowAttach"> <fieldset> <Label>Arquivo Anexado</Label> <input type="file" id="file-name" name="file-upload" value="escolha" multiple> </fieldset> <fieldset> <Label>Descrição</Label> <input type="text" name="descricao" value=""> <button data-js="btn-add">+</button> <button data-js="btn-remove">X</button> </fieldset> </div> </form> <div class="btn-carregar"> <input type="submit" value="Carregar"> </div> 

How do I trigger the new fields created?

Answer 1

If I'm understanding your question correctly, the issue you're running into is that cloneNode doesn't clone events listeners.

First thing you're going to want to do is take your functions that add the listeners out of the map function so you can call them independently and add the events to the cloned items like

let triggerAdd = function(btnAdd, i){
  btnAdd.addEventListener('click', function(e){
    e.preventDefault();
    console.log("button", btnAdd, i);
    let formItems = document.querySelector('[data-js="formAttach"]'),
        copy = formItems.firstElementChild.cloneNode(true),
        copiedAdd = copy.querySelector('[data-js="btn-add"]'),
        copiedRemove = copy.querySelector('[data-js="btn-remove"]');

    triggerAdd(copiedAdd, i+1);
    triggerRemove(copiedRemove, i+1)

    formItems.appendChild(copy);
  }, false);
}

let triggerRemove = function(btnRemove, i){
  btnRemove.addEventListener('click', function(e){
    e.preventDefault(e);
    console.log('remove btn', btnRemove, i);
  }, false);
}

listBtnAdd.map((btnAdd, i) => {
   triggerAdd(btnAdd, i);
});

listBtnRemove.map( (btnRemove, i)=> {
   triggerRemove(btnRemove, i);
});

Answer 2

I managed to solve it like this:

form.addEventListener('click', function (evt) {
  const elem = evt.target;
  const dataJS = elem.dataset.js; 

  if (dataJS != null) {
    evt.preventDefault();
  }

  if ('btn-add' === dataJS) {
    const row = createRow();
    row.querySelector('[name="file-upload"]').value = '';
    row.querySelector('[name="descricao"]').value = '';
  } else if ('btn-remove' === dataJS) {
    evt.target.parentNode.parentNode.remove();
  }
});

function createRow() {
  const row = rows[0].cloneNode(true);
  rows[0].parentNode.appendChild(row);
  return row;
}