添加'；X'；文本字段旁边带有工作javascript的按钮

我对JavaScript不太熟悉（一点也不熟悉），我在谷歌上搜索并找到了一个很棒的演示教程，可以用js添加文本字段。这是最新的。我让它工作，但它缺少一个功能-删除文本字段。我还下载了一个很棒的图标集，把它放在按钮旁边，但是有人能描述一下如何通过按下按钮来删除文本字段吗

这是页面中的默认javascript（我稍微修改了输入部分以满足我的需要）

var计数器=1；
风险价值限额=65；
函数addInput（divName）{
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}
否则{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“Nimi”+（计数器+1）+”；
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
}

这是html部分

<form method="POST">
        <script src=form.js></script>
        <div id="dynamicInput">
            Nimi 1<input type="text" name="myInputs[]" class="field">
        </div>
        <input type="button" value="Add another text input"     onClick="addInput('dynamicInput');">
    </form>

尼米1号

---

在它旁边添加按钮很容易，但是有人可以通过点击旁边的按钮快速编写js代码来删除文本字段吗

向DOM添加组件时，应为其提供id。如果要删除某个组件，可使用id引用该组件

newDiv.id = 'soCool'; //when creating the component.
$('#soCool').remove(); //using jQuery

您还可以设置组件的类，以便在添加同一类的多个组件时，可以同时删除所有组件

newDiv.class = 'soCoolClass';
otherNewDiv.class = 'soCoolClass';
$('.soCoolClass').remove(); //this will remove newDiv and otherNewDiv

试试这个：

var counter = 1;
var limit = 65;
function addInput(divName){
    if (counter == limit)  {
         alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
         var newdiv = document.createElement('div');
         newdiv.innerHTML = "Nimi " + (counter + 1) + " <input type='text' name='myInputs[]' class='field'> <button onClick='removeInput()'>Remove</button>";
         document.getElementById(divName).appendChild(newdiv);
         counter++;
    }
}
function removeInput(){
    event.target.parentNode.parentNode.removeChild(event.target.parentNode);
    counter--;
}

var计数器=1；
风险价值限额=65；
函数addInput（divName）{
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}
否则{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“Nimi”+（计数器+1）+“删除”；
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
}
函数removeInput（）{
event.target.parentNode.parentNode.removeChild（event.target.parentNode）；
计数器--；
}

这是一个纯Javascript解决方案，没有任何JQuery。您要做的是创建另一个函数，将父div的最后一个子项设置为变量，然后删除该子项。别忘了减少你的计数器

function removeInput(divName) {
     var lastDiv = document.getElementById(divName).lastChild;
      document.getElementById(divName).removeChild(lastDiv);
      counter--;
}

以下是按钮的代码：

<input type="button" value="Remove text input" onClick="removeInput('dynamicInput');">

<input type="button" value="Remove text input" onClick="removeInput('dynamicInput');">