javascript 一个函数用于创建和删除输入的多个“加”和“减”按钮

alen0pnh 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(166)

嗨，我正在尝试做一个"加号"按钮，当点击时创建一个输入和一个"减号"按钮，当点击时删除最后一个输入。因为我想使用相同的函数做同样的事情与多个"行"，我试图添加变量的名称"计数"在函数的参数。这似乎是什么使代码片段错误，但我不知道如何使它工作。

let count1 = 0;
let count2 = 0;
function newX(x, y){
    y++;
    let inputsContainer = document.getElementById(x);
    let newInput = document.createElement("input");
    newInput.type = "text"; newInput.id = x+y;
    inputsContainer.appendChild(newInput);
}
function deleteX(x, y){
    document.getElementById(x).lastChild.remove();
    y--;
}
function result(){
  document.getElementById('result').innerText = document.getElementById('AAA-').innerHTML + document.getElementById('BBB-').innerHTML
}

<h2>Test 1</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('AAA-', count1)">+</button>
    <button onclick="deleteX('AAA-', count1)" style="margin-right:5px;">-</button>
  </div>
  <div id="AAA-">
    <input type="text" id="AAA-0">
  </div>
</div>
<h2>Test 2</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('BBB-', count2)">+</button>
    <button onclick="deleteX('BBB-', count2)" style="margin-right:5px;">-</button>
  </div>
  <div id="BBB-">
    <input type="text" id="BBB-0">
  </div>
</div>
<h2>Name of the new ids</h2>
<button onclick=result()>Show</button>
<div id="result"></div>

JavaScript

来源：https://stackoverflow.com/questions/74953910/one-function-for-multiple-plus-and-minus-buttons-that-create-and-delete-inpu

2条答案

按热度按时间

xdyibdwo1#

你的问题是你的函数在创建新的输入时创建了具有相同id的元素。你可以使用parentDom.lastchild.remove()删除最后一个元素。请检查我的代码。

function deleteX(x, y){
    let lastInputName = x+y;
    let lastInput = document.getElementById(lastInputName);
    document.getElementById(x).lastChild.remove();
    y--;
}

赞(0）回复(0）举报 2023-01-01

fjaof16o2#

最后我找到了解决办法：

function newX(x){
      var div = document.getElementById(x);
      var inputs = div.querySelectorAll("input");
      let numInputs = inputs.length;
    let inputsContainer = document.getElementById(x);
    let newInput = document.createElement("input");
    newInput.type = "text"; newInput.id = x+numInputs;
    inputsContainer.appendChild(newInput);
}
function deleteX(x){
    document.getElementById(x).lastChild.remove();
}
function result(){
  document.getElementById('result').innerText = document.getElementById('AAA-').innerHTML + document.getElementById('BBB-').innerHTML
}

<h2>Test 1</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('AAA-')">+</button>
    <button onclick="deleteX('AAA-')" style="margin-right:5px;">-</button>
  </div>
  <div id="AAA-">
    <input type="text" id="AAA-0">
  </div>
</div>
<h2>Test 2</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('BBB-')">+</button>
    <button onclick="deleteX('BBB-')" style="margin-right:5px;">-</button>
  </div>
  <div id="BBB-">
    <input type="text" id="BBB-0">
  </div>
</div>
<h2>Name of the new ids</h2>
<button onclick=result()>Show</button>
<div id="result"></div>

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 一个函数用于创建和删除输入的多个“加”和“减”按钮

2条答案

相关问题

热门标签

最新问答