我試圖用HTML，CSS和JavaScript（或一點點jQuery）創建動態形式，所以我的ploblem是我的：
<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的其他輸入的更大形式的一部分）
uj5u.com熱心網友回復：
使用行內事件處理程式 ( )通常不是一個好主意<button onclick=...。
這是一個最小的可重現示例，其中委托處理處理在div#form-container.
此代碼的游樂場。
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 >Submbit</button>
<button >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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452195.html
標籤：javascript html jQuery dom