動態文本框使用JavaScript和PHP

Question

你好我新手在JavaScript和jQuery。 我想製作一個動態文本框，使用JavaScript可以添加和刪除一行。當我按下添加按鈕時，它運作良好。但是當我按刪除，它刪除了我的所有表。

這裏是我的javascript函數和我的PHP代碼：

<script type="text/javascript"> 
    function addProg(){ 

      document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus()' value='Hapus'></tr>"; 
    } 

    function hapus() 
    { 
     var x = document.getElementById("add_prog"); 
     x.remove(x.tr); 
    } 
</script> 
<div class="container">  
     <center><h3>Form Pendaftaran 
     </h3><center><br> 
      <table class="table table-bordered"> 
      <thead><tr> 
      <td> a </td> 
      <td> b </td> 
      <td> c </td> 
      </tr></thead> 

      <tbody id="add_prog"> 

      <tr id="1"> 
      <td><input type="date" class="form-control" name="tanggal[]"></td> 
      <td><input type="number" class="form-control" name="kuota[]"></td> 
      <td><input type="time" class="form-control" name="jam_mulai[]"></td> 
      <td><input type="button" class="btn btn-danger" onclick="hapus()" value="Hapus"></td> 
      </tr> 

      </tbody> 
      </table> 

      <input type="button" class="btn btn-default" onclick="addProg()" value="Tambah"> 

我不知道如何刪除我想刪除它在我的劇本寫spesific指數。有人可以請告訴我該怎麼做嗎？

Answer 1

使用element.parentNode.parentNode.remove();刪除元素，你將有相應的點擊按鈕

找到tr元素試試這個：

function addProg() { 
 

 
    document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus(this)' value='Hapus'></tr>"; 
 
} 
 

 
function hapus(element) { 
 
    element.parentNode.parentNode.remove(); //document.getElementById('add_prog').removeChild(element.parentNode.parentNode); 
 
}

<div class="container"> 
 
    <center> 
 
    <h3>Form Pendaftaran 
 
     </h3> 
 
    <center> 
 
     <br> 
 
     <table class="table table-bordered"> 
 
     <thead> 
 
      <tr> 
 
      <td>a</td> 
 
      <td>b</td> 
 
      <td>c</td> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody id="add_prog"> 
 

 
      <tr id="1"> 
 
      <td> 
 
       <input type="date" class="form-control" name="tanggal[]"> 
 
      </td> 
 
      <td> 
 
       <input type="number" class="form-control" name="kuota[]"> 
 
      </td> 
 
      <td> 
 
       <input type="time" class="form-control" name="jam_mulai[]"> 
 
      </td> 
 
      <td> 
 
       <input type="button" class="btn btn-danger" onclick="hapus(this)" value="Hapus"> 
 
      </td> 
 
      </tr> 
 

 
     </tbody> 
 
     </table> 
 

 
     <input type="button" class="btn btn-default" onclick="addProg()" value="Tambah">

Answer 2

我想你要刪除的是你的tbody元素的lastChild。

這是關於lastChild的一些信息。