动态添加和删除输入fiel

Question

我有一个表单，其中我有添加和减去按钮。在点击事件中，它应该添加一个新的输入字段并相应地删除所选的输入字段。在我的情况下添加按钮功能，但删除选定的输入字段不起作用。 如果不让我知道，我希望我能正确解释我的问题。  提前谢谢。

＆＃13;

＆＃13;

.multivaluebox {
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
  width: 60%;
}

.form-multivaluebox-textbox {
  border: 1px solid #ccc;
  border-radius: 0;
  width: 100%;
}

.btncontainer {
  width: 6%;
  padding-left: 1%;
  margin: 0;
}

.subbutton {
  margin-top: 2px;
  width: 34px;
  height: 34px;
  padding: 1%;
  background-color: #0098ff;
  color: white;
  border: none;
  font-weight: bold;
}

.addbutton {
  width: 34px;
  height: 34px;
  padding: 1%;
  background-color: #0098ff;
  color: white;
  border: none;
  font-weight: bold;
  margin-bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multivaluebox ">
  <input asp-for="@Model" class=" form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">

  <input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
  <br />
  <input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
  <script>
    function addtextbox() {

      var newdiv = document.createElement('div');

      $(newdiv).addClass('multivaluebox');
      newdiv.innerHTML = ' <input asp-for="@Model" class=" form-multivaluebox-textbox" value="@(Model?.Count >= 3 ? Model[2] : null)" id="Labels"  />';
      document.getElementById('wrapper').appendChild(newdiv);

       
    }

    function deletetextbox() {
      var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');
      for (i = 0; i < inputlist.length; i++) {
        if (document.getElementsByClassName('form-multivaluebox-textbox').isActive) {
          $(this).remove();

        }
      }

       
    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

我把它放在一起，但它并不完美。

它允许您向包装器添加项目并删除所选项目。但是我建议在每个文本框的末尾添加一个删除按钮，以便更加精确和用户友好。

var currentSelection;
  
  function makeCurrentSelection(element){
  		currentSelection = element;
  }
 
    function addtextbox() {

      var newdiv = document.createElement('div');

      $(newdiv).addClass('multivaluebox');
      newdiv.innerHTML = ' <input asp-for="@Model" class=" form-multivaluebox-textbox" value="@(Model?.Count >= 3 ? Model[2] : null)" id="Labels" onfocus="makeCurrentSelection(this)"/>';
      document.getElementById('wrapper').appendChild(newdiv);

       
    }

    
    function deletetextbox() {
      currentSelection.remove(); 
    }

.multivaluebox {
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
  width: 60%;
}

.form-multivaluebox-textbox {
  border: 1px solid #ccc;
  border-radius: 0;
  width: 100%;
}

.btncontainer {
  width: 6%;
  padding-left: 1%;
  margin: 0;
}

.subbutton {
  margin-top: 2px;
  width: 34px;
  height: 34px;
  padding: 1%;
  background-color: #0098ff;
  color: white;
  border: none;
  font-weight: bold;
}

.addbutton {
  width: 34px;
  height: 34px;
  padding: 1%;
  background-color: #0098ff;
  color: white;
  border: none;
  font-weight: bold;
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
  <input asp-for="@Model" class=" form-multivaluebox-textbox" value="hello" onfocus="makeCurrentSelection(this)">
</div>
<div class="btncontainer col-sm-1">

  <input type="button" class="addbutton " onclick="addtextbox(); " value="+">
  <br>
  <input type="button" class=" subbutton" onclick="deletetextbox();" value="-">
  
</div>

Answer 2

不完美，但这会让您了解如何在JavaScript中添加/删除元素。

1. 在包装器div中添加元素
2. 从包装器div中删除元素

执行时请展开代码段。

希望这有帮助！

＆＃13;
＆＃13;
function addtextbox() {

      var newdiv = document.createElement('div');

      $(newdiv).addClass('multivaluebox');
      newdiv.innerHTML = ' <input asp-for="@Model" class=" form-multivaluebox-textbox" value="@(Model?.Count >= 3 ? Model[2] : null)" id="Labels"  />';
      document.getElementById('wrapper').appendChild(newdiv);

       
    }

    function deletetextbox() {
      var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');// document.getElementsByClassName()
      
      for (i = 0; i < inputlist.length; i++) {

          var elem = inputlist[0];
    return elem.parentNode.removeChild(elem);
    

        
      }

       
    }
＆＃13;
.multivaluebox {
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
  width: 60%;
}

.form-multivaluebox-textbox {
  border: 1px solid #ccc;
  border-radius: 0;
  width: 100%;
}

.btncontainer {
  width: 6%;
  padding-left: 1%;
  margin: 0;
}

.subbutton {
  margin-top: 2px;
  width: 34px;
  height: 34px;
  padding: 1%;
  background-color: #0098ff;
  color: white;
  border: none;
  font-weight: bold;
}

.addbutton {
  width: 34px;
  height: 34px;
  padding: 1%;
  background-color: #0098ff;
  color: white;
  border: none;
  font-weight: bold;
  margin-bottom: 0;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
  <input asp-for="@Model" class="form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">

  <input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
  <br />
  <input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
  
  <div ></div>
＆＃13;
＆＃13;
＆＃13;