[英]Small Javascript Issue with removing multiple elements from dynamic form
如果可能的話,任何人都可以闡明我在做什么錯嗎?
我們在php頁面上有一個帶有javascript的基本表單,當單擊按鈕時會創建4個表單字段。
如果多次單擊該按鈕,它將繼續創建4列的行。 問題是如果有人單擊該按鈕,則試圖刪除該行(4個元素),我只能在需要刪除該行中所有4個元素(輸入)的地方刪除它,
JAVASCRIPT
var i = 0; /* Set Global Variable i */
function increment() {
i += 1; /* Function for automatic increment of field's "Name" attribute. */
}
//Function to Remove Form Elements Dynamically
function removeElement(parentDiv, childDiv) {
if (childDiv == parentDiv) {
alert("The parent div cannot be removed.");
} else if (document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
} else {
alert("Child div has already been removed or does not exist.");
return false;
}
}
//Functions that will be called upon, when user click on the Name text field.
function nameFunction() {
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Name");
var g = document.createElement("IMG");
g.setAttribute("src", "img/delete.png");
increment();
y.setAttribute("Name", "quantityordered_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "QTY Delivered");
var g = document.createElement("IMG");
g.setAttribute("src", "img/delete.png");
increment();
y.setAttribute("Name", "quantitydelivered_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Description");
var g = document.createElement("IMG");
g.setAttribute("src", "img/delete.png");
increment();
y.setAttribute("Name", "description_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Price ie; £15.00");
var g = document.createElement("IMG");
g.setAttribute("src", "img/delete.png");
increment();
y.setAttribute("Name", "price_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
//Functions that will be called upon, when user click on the Reset Button.
function resetElements() {
document.getElementById('myForm').innerHTML = '';
}
HTML
<div class="col-md-12" style="margin-top:20px; padding-left:30px;">
<button type="button" onclick="nameFunction()" class="btn btn-info">
<i class="fa fa-plus"></i>
Add another Item
</button>
</div>
我希望這有幫助? 請注意Iam是JS的新手,並認為這將是深入研究etc的絕佳項目。
在此先感謝您提供任何建議
我認為最好的辦法是將所有的四個創建的元素放到周圍div
,給它一個id
,並通過將其刪除id
。
但是,如果要保留當前結構,可以按類名將其刪除。
1)創建一個用於從i
生成類名的函數(假設nameFunction
創建4個元素):
function getClassName(i) {
return "name_spans_" + ~~((i - 1)/4);
}
2)在每次調用increment()
之后,在每個生成的跨度中添加一個類:
increment(); // after this line
r.className += getClassName(i);
3)修改onclick
處理程序以傳遞最后生成的跨度的i
:
g.setAttribute("onclick", "removeElement('myForm'," + i + ")");
4)修改removeElement
函數以刪除具有與傳遞的i
相對應的類名的所有元素:
function removeElement(parentDiv, i) {
var parent = document.getElementById(parentDiv);
var children = [].slice.call(document.getElementsByClassName(getClassName(i)));
for (var c = 0; c < children.length; ++c) {
parent.removeChild(children[c]);
}
}
我的響應類似於@ user3153664一個,但是我將“創建元素”階段簡化為一個函數,並試圖清理代碼...
var i = 0; /* Set Global Variable i */ function increment() { i += 1; /* Function for automatic increment of field's "Name" attribute. */ } //Function to Remove Form Elements Dynamically function removeElement(parentDiv, childDiv) { if (childDiv == parentDiv) { alert("The parent div cannot be removed."); } else if (document.getElementById(childDiv)) { var child = document.getElementById(childDiv); var parent = document.getElementById(parentDiv); parent.removeChild(child); } else { alert("Child div has already been removed or does not exist."); return false; } } function createInputElement(row, placeholder, name) { var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("placeholder", placeholder); var g = document.createElement("IMG"); g.setAttribute("src", "img/delete.png"); g.setAttribute("alt", "X"); y.setAttribute("Name", name); var r = document.createElement('span'); r.appendChild(y); g.onclick = function() { removeElement('myForm', row.getAttribute('id')) }; r.appendChild(g); return r; } //Functions that will be called upon, when user click on the Name text field. function nameFunction() { var row = document.createElement('P'); // a set of 4 elements to be delete together increment(); row.setAttribute("id", "id_" + i); // set the row id with the value of i row.appendChild(createInputElement(row, 'Name', 'quantityordered_'+i )); increment(); row.appendChild(createInputElement(row, 'QTY Delivered', 'quantitydelivered_'+i )); increment(); row.appendChild(createInputElement(row, 'Description', 'description_'+i )); increment(); row.appendChild(createInputElement(row, 'Price ie; £15.00', 'price_'+i )); document.getElementById("myForm").appendChild(row); } //Functions that will be called upon, when user click on the Reset Button. function resetElements() { document.getElementById('myForm').innerHTML = ''; }
<form id="myForm"> <div class="col-md-12" style="margin-top:20px; padding-left:30px;"> <button type="button" onclick="nameFunction()" class="btn btn-info"> <i class="fa fa-plus"></i> Add another Item </button> </div> </form>
將所有4個輸入插入一個“容器”中-您可以通過刪除一個容器將其全部刪除。
var i = 0; /* Set Global Variable i */ function increment() { i += 1; /* Function for automatic increment of field's "Name" attribute. */ } //Function to Remove Form Elements Dynamically function removeElement(childId) { // Simplify form - only need a childId if (document.getElementById(childId)) { var child = document.getElementById(childId); child.parentNode.removeChild(child); } } //Functions that will be called upon, when user click on the Name text field. function nameFunction() { // Create a container for all 4 inputs var container = document.createElement('div'); var containerId = 'id_' + i; container.id = containerId; increment(); var r = document.createElement('span'); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("placeholder", "Name"); var g = document.createElement("IMG"); g.setAttribute("src", "img/delete.png"); g.setAttribute("onclick", "removeElement('" + containerId + "')"); y.setAttribute("Name", "quantityordered_" + i); r.appendChild(y); r.appendChild(g); container.appendChild(r); increment(); var r = document.createElement('span'); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("placeholder", "QTY Delivered"); var g = document.createElement("IMG"); g.setAttribute("src", "img/delete.png"); g.setAttribute("onclick", "removeElement('" + containerId + "')"); y.setAttribute("Name", "quantitydelivered_" + i); r.appendChild(y); r.appendChild(g); container.appendChild(r); increment(); var r = document.createElement('span'); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("placeholder", "Description"); var g = document.createElement("IMG"); g.setAttribute("src", "img/delete.png"); g.setAttribute("onclick", "removeElement('" + containerId + "')"); y.setAttribute("Name", "description_" + i); r.appendChild(y); r.appendChild(g); container.appendChild(r); increment(); var r = document.createElement('span'); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("placeholder", "Price ie; £15.00"); var g = document.createElement("IMG"); g.setAttribute("src", "img/delete.png"); g.setAttribute("onclick", "removeElement('" + containerId + "')"); y.setAttribute("Name", "price_" + i); r.appendChild(y); r.appendChild(g); container.appendChild(r); increment(); // Append container to form document.getElementById("myForm").appendChild(container); } //Functions that will be called upon, when user click on the Reset Button. function resetElements() { document.getElementById('myForm').innerHTML = ''; }
<div id="myForm" class="col-md-12" style="margin-top:20px; padding-left:30px;"> <button type="button" onclick="nameFunction()" class="btn btn-info"> <i class="fa fa-plus"></i> Add another Item </button> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.