刪除動態表單域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>