有没有正确的方法在 div 容器中动态添加 "forms"，只有 JavaScript？

Question

我正在尝试仅使用 html、css 和 JavaScript（或一点点 JQuery）创建动态表单，所以我的问题是这个：

<div class="form-item">
                   <label for="form-container">Random Title:</label>
                   <div id="form-container">
                       ***Here is where I add dynamic "forms"***
                   </div>
                   <div>
                       <button type="button" class="add-form" onclick="AddForm()">Add form</button>
                   </div>
</div>

而 JavaScript 是（我不知道这是否是最好的解决方案，但至少它有效哈哈）：

function addForm(){

    let container= document.getElementById('form-container');

    if (cnt<5){
        cnt+=1;
        container.innerHTML += `***the form but write on HTML format***`;
    } else {
        alert("¡you cant add anymore!");
    }

}

我需要类似的东西，但要删除我使用动态添加按钮添加的表单。

（表格在“”之间，因为它实际上不是表格，它只是一个 div，里面有输入，因为它是更大表格的一部分，其他 div 上有其他输入）

Answer 1

通常not a good idea使用内联事件处理程序(<button onclick=...)。

这里有一个 minimal reproducable example where delegated handling 处理 div#form-container 内最多 5 个动态表单的创建、提交和删除。

Playground 此代码。

const maxForms = 5;
document.addEventListener(`click`, handle);

function createFormHTML(n) {
  if (n > maxForms) {
    return alert(`No more forms allowed`);
  }
  return `
    <div data-dynamicform="${n}">
      <input type="text" placeholder="type something!">
      <button class="submit">Submbit</button>
      <button class="erase">Delete form</button>
    </div>`;
}

function handle(evt) {
  console.clear();
  
  if (evt.target.classList.contains(`add-form`)) {
    const container = document.querySelector(`#form-container`);
    container.dataset.nforms = +container.dataset.nforms + 1;
    const newForm = createFormHTML(+container.dataset.nforms);
    return newForm && container
      .insertAdjacentHTML(`beforeend`, newForm) || true;
  }
  
  if( evt.target.classList.contains(`submit`)) {
    return console.log(`submitted form #${
      evt.target.closest(`[data-dynamicform]`).dataset.dynamicform}`);
  }
  
  if (evt.target.classList.contains(`erase`)) {
    evt.target.closest(`[data-dynamicform]`).remove();
    const dynamicForms = document.querySelectorAll(`[data-dynamicform]`);
    dynamicForms.length && dynamicForms
      .forEach( (form, i) => form.dataset.dynamicform = i + 1 );
    document.querySelector(`#form-container`).dataset.nforms = 
      dynamicForms.length;
  }
}

body {
  margin: 1rem;
  font: normal 12px/15px verdana,arial;
}

#form-container {
  padding: 4px;
}

#form-container [data-dynamicform] {
  margin-bottom: 4px;
}

<div class="form-item">
  <div>
    <button type="button" class="add-form">Add form</button>
  </div>
  <div id="form-container" data-nforms="0">
    <h4>Your forms</h4>
  </div>
</div>

有没有正确的方法在 div 容器中动态添加 "forms"，只有 JavaScript？

is there a correct way to add dynamically "forms" in a div-container with just JavaScript?

html

javascript

jquery

dom