javascript - 单击按钮时的新输入

标签 javascript html

这个问题真的很菜鸟,但是有人能告诉我这段代码有什么问题吗?

我正在尝试在单击按钮时动态创建新的输入框,旁边有一个新按钮。

我希望新的输入框和按钮具有不同的 ID,以便之后删除它们。

奖励问题:我将如何删除特定的输入框和按钮?

var counter = 1;

function addInput(){
  var newdiv = document.createElement('div');
  newdiv.id = dynamicInput[counter];
  newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput("+dynamicInput[counter]+");'>";
  document.getElementById('formulario').appendChild(newdiv);
  counter++;
}
<form method="POST" id="formulario">
  <div id="dynamicInput[0]">
    Entry 1<br><input type="text" name="myInputs[]"> 
    <input type="button" value="+" onClick="addInput();">
  </div>
</form>

最佳答案

此外,您还可以删除创建的元素:

<html>
<head>
<script>
var counter = 1;
var dynamicInput = [];

function addInput(){
    var newdiv = document.createElement('div');
    newdiv.id = dynamicInput[counter];
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput("+dynamicInput[counter]+");'>";
    document.getElementById('formulario').appendChild(newdiv);
    counter++;
}
  
  function removeInput(id){
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
  }
</script>
</head>
<body>
<form method="POST" id="formulario">
     <div id="dynamicInput[0]">
        Entry 1<br><input type="text" name="myInputs[]"> 
        <input type="button" value="+" onClick="addInput();">
    </div>
</form>
</body>
</html>

关于javascript - 单击按钮时的新输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42015443/

相关文章:

如果将条件添加到循环中,Javascript 函数将停止工作

javascript - 第:onchange ="javascript:showPIIDoc();"

javascript - jquery 在我的 asp.net 内容页中不起作用

javascript - 如何在 jQuery 中确定和设置窗口的高度和滚动位置?

html - 裁剪边界半径非常大的图像

javascript - 是否可以使用 HTML/Javascript 按名称启动应用程序?

javascript - 如何在模块化用户界面中管理基于事件的输入?

javascript - 在绝对定位的模态中滑动

javascript - 如何让 html 显示在页面上而不是运行?

html - 具有不同宽度内容 div 的页脚页脚