如何通过它们的类名同时删除多个动态生成的元素？

Question

我正在做一个电子商务项目，对于运输部分，我让用户输入一个与价格相关的区域，然后用“删除”按钮显示这两个值。 用户可以多次生成这三个元素。（并且在这三个生成的元素中的每个元素上，都有两个隐藏的输入以处理值，然后使用php处理该数据）单击删除按钮时，我想删除输入的区域+价格+删除按钮，其相似的类别名称。 但是，当它动态生成时该怎么办呢？ 这是HTML部分：

        <label for="places">Places/area : </label>
        <input type="text" name="ps_places" id="ps_places" value="" >
        <label for="ps_price" "> Price : </label><input type="text" name="ps_price" id="ps_price" value="" >
        <button type="button" onclick="ps_add()">OK</button>
        <div id="display1"></div>

和javascript部分：

function addElement(parentId, elementTag, elementId, html) {
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('class', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}


function ps_add() 
{

var pv = document.getElementById('ps_places').value;
var prv = document.getElementById('ps_price').value;

if((pv != "") && (prv != ""))
{
ps_id++;

addElement("display1", "span", ps_id, "- ");
addElement("display1", "label", ps_id, pv);
addElement("display1", "span", ps_id, " :  ");
addElement("display1", "label", ps_id, prv);
addElement("display1", "span", ps_id, "    ");
addElement("display1", "button", ps_id, "Remove");
addElement("display1", "br", ps_id, "");

var input1 = document.createElement("input");
input1.setAttribute("type", "hidden");
input1.setAttribute("class", "ps_id");
input1.setAttribute("name", "ps_places[]");
input1.setAttribute("value", pv);
display1.appendChild(input1);

var input2 = document.createElement("input");
input2.setAttribute("type", "hidden");
input2.setAttribute("class", "ps_id");
input2.setAttribute("name", "ps_price[]");
input2.setAttribute("value", prv);
display1.appendChild(input2);
}
document.getElementById('ps_places').value= ""; 
document.getElementById('ps_price').value= "";  
}

Answer 1

当您添加了jquery时 ，我会假设您使用jQuery。 您可以使用以下命令按其类名删除所有元素：

$(".classname").remove();

如果是错误的，并且需要纯JavaScript解决方案，则可以使用以下方法：

elems = document.querySelectorAll(".classname");
for (var elem in elems)
  elems[elem].parentNode.removeChild(elems[elem]);