如何通過它們的類名同時刪除多個動態生成的元素？

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]);