正在添加'X'按钮，在文本字段旁边使用javascript

Adding 'X' button with working javascript next to the text field

本文关键字：字段 javascript 按钮 添加 文本      更新时间：2023-09-26

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

这是页面中的默认javascript（我修改了一点条目部分以满足我的需求）

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'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

这是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>

在旁边添加按钮很容易，但有人能快速编写js代码，点击旁边的按钮删除文本字段吗？？

这是一个纯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');">

当向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--;
}
相关文章：