如果可能的话,任何人都可以阐明我在这里做错了什么吗?
我们在一个带有 javascript 的 php 页面上有一个基本表单,当单击一个按钮时它会创建 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>
我希望这对您有所帮助?请注意,我是 JS 的新手,我认为这将是一个值得深入研究的好项目。
非常感谢任何人可以提供的任何建议
最佳答案
我认为最好的方法是将所有四个创建的元素放入周围的 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
处理程序以传递最后生成的span的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]);
}
}
关于javascript - 从动态表单中删除多个元素的小 Javascript 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37186264/