删除动态表单域JS/HTML

Question

我对JS和HTML比较新，并且按照本教程（https://www.youtube.com/watch?v=iaeCSh7YJDM&t=422s）将选择框和输入框变为动态表单域，以添加尽可能多的他们根据需要与一个添加按钮。添加按钮完美工作，但在实现与视频中相同的代码后，删除按钮不起作用，我无法弄清楚原因。我已经回去重新检查，并交叉检查视频代码，但我似乎无法看到我错过了什么。任何帮助将不胜感激。以下是我的代码部分。

HTML

<div class="form-group row" id = "addF" > 
       <label class="col-sm-3 col-lg-3 col-md-3 form-control-label"> 
        Label 
       </label> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       <select class="form-control" id="xxxx" name="yyyyy" required> 
         <option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option> 
       </select> 
       </div> 
       <div class="col-sm-3 col-lg-3 col-md-3"> 
        <input type="text" class="form-control" id=vvvv" name="zzzz" required> 
       </div> 
       <div class="col-sm-1 col-lg-1 col-md-1"> 
       <input type="button" id="add_fact()" onClick="addFact()" value="+"> 
       </div> 
      </div> 

JS

<script type="text/javascript"> 
     var i =1; 

     function addFact(){ 
      i++; 
      var div = document.createElement('div'); 
      div.innerHTML = '<label class="col-sm-3 col-lg-3 col-md-3 form-control-label">Label '+i+'</label><div class="col-sm-4 col-lg-4 col-md-4"> <select class="form-control" id="xxxx'+i+'" name="yyyy_'+i+'" required><option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option></select></div><div class="col-sm-3 col-lg-3 col-md-3"> <input type="text" class="form-control" id="vvvv" name="zzzz_'+i+'" required></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" id="add_fact()" onClick="addFact()" value="+"></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" value="-" onClick="removeFact(this)"></div>'; 
      document.getElementById('addF').appendChild(div); 

     function removeFact(div) { 
      document.getElementById('addF').removeChild(div.parentNode); 
      i--; 
     } 
</script> 

Answer 1

在

您没有接收到div元素 “removeFact” 功能;当你与“此”作为参数，您会收到按钮元素，因此要修复它调用它，你必须调用函数这样

onClick="removeFact(this.parentNode)" 

或更改功能这样

function removeFact(button) { 
    document.getElementById('addF').removeChild(button.parentNode.parentNode); 
    i--; 
} 

Answer 2

你必须更深入一层。

试试这个：

<script type="text/javascript"> 
     var i =1; 

     function addFact(){ 
      i++; 
      var div = document.createElement('div'); 
      div.innerHTML = '<label class="col-sm-3 col-lg-3 col-md-3 form-control-label">Label '+i+'</label><div class="col-sm-4 col-lg-4 col-md-4"> <select class="form-control" id="xxxx'+i+'" name="yyyy_'+i+'" required><option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option></select></div><div class="col-sm-3 col-lg-3 col-md-3"> <input type="text" class="form-control" id="vvvv" name="zzzz_'+i+'" required></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" id="add_fact()" onClick="addFact()" value="+"></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" value="-" onClick="removeFact(this)"></div>'; 
      document.getElementById('addF').appendChild(div); 
} 


     function removeFact(div) { 
       document.getElementById('addF').removeChild(div.parentNode.parentNode); 
       i--; 
      } 
</script>