有没有什么好的方法可以删除对应的选择表呢？

Question

使用这段代码有一个按钮，您可以添加一个选择，这将添加 2 个输入框和一个带有 X 的按钮，当您按下 x 按钮时，我希望它删除相应的选择表单，任何人都知道如何做

 //adds more selection forms 
  var selectionAmmount = 0;
  var div;
  function addSelection() {
    var div = document.createElement('div')
    div.innerHTML = '<br>' + 
        '<input type="text" placeholder="Name Of selection">' + '<br>' +
        '<input type="number" placeholder="Price per s.y"">' + '<input type="button" value="x" onClick="removeSelection()">' + '<br>';

    document.getElementById("addSelection").appendChild(div);
    selectionAmmount++;
  }

  function removeSelection(t) {
    document.getElementById("addSelection").removeChild(document.getElementById("addSelection").childNodes[selectionAmmount - 1]);
    selectionAmmount--;
  }

 <div>
Has a selection: <input type="checkbox" id="selection" checked><br><br>
<selection id="hideSelection">
  <input type="text" placeholder="Name Of selection" id="selectionName"><br>
  <input type="number" placeholder="Price per s.y" id="selectionPrice"><br>
  <selection id="addSelection"></selection>   
  <input type="button" value="+ selection" onclick="addSelection()"><br><br>
</selection>

这是一个 Link 托管代码，如果您想实际查看代码：https://ogdens-flooring-estimator.hunterscott1.repl.co/carpet.html

如果有帮助，我也可以 post 整个文件，请告诉我，如果有任何帮助，我将不胜感激 :)

Answer 1

将 id 分配给您在 addSelection() 中创建的 div

 div.id=`selection${id}`;

在按钮点击中传递id

onClick="removeSelection(${id})"

在 removeSelection 函数中，通过 id 获取元素并将其删除。

document.getElementById(`selection${id}`).remove();

运行以下片段。

var selectionAmmount = 0;
var id=1;
var div;
function addSelection() {
  var div = document.createElement('div')
  div.innerHTML = `<br><input type="text" placeholder="Name Of selection"><br><input type="number" placeholder="Price per s.y""><input type="button" value="x" onClick="removeSelection(${id})"><br>`;
  div.id=`selection${id}`;    
  document.getElementById("addSelection").appendChild(div);
  selectionAmmount++;
  id++;
}

function removeSelection(id) { 
  selectionAmmount--;
  document.getElementById(`selection${id}`).remove();
}

<div>
Has a selection: <input type="checkbox" id="selection" checked><br><br>
<selection id="hideSelection">
  <input type="text" placeholder="Name Of selection" id="selectionName"><br>
  <input type="number" placeholder="Price per s.y" id="selectionPrice"><br>
  <selection id="addSelection"></selection>   
  <input type="button" value="+ selection" onclick="addSelection()"><br><br>
</selection>

有没有什么好的方法可以删除对应的选择表呢？

Is there a good way to delete the corresponding selection form?

html

javascript

parent-child