使用javascript和php的动态文本框(dynamical textbox using javascript and php)

你好，我在javascript和jquery新手。我想使用javascript创建一个动态文本框，可以添加和删除一行。当我按下添加按钮时，效果很好。但当我按下删除时，它删除了我的所有表格。

这是我的javascript函数和我的PHP代码：

我不知道如何删除我要删除的特定索引并将其写入我的脚本中。有人可以告诉我该怎么做？

hello im newbie at javascript and jquery. i want to make a dynamical textbox using javascript which can add and remove a row. when i press add button, it works well. but when i pressed delete, it deleted all my table.

here is my javascript function and my php code:

i dont know how to delete spesific index that i want to deleted and write it in my script. can someone just please tell me how to do it?

最满意答案

使用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"> 
  
 
 
 Use element.parentNode.parentNode.remove(); to remove element as you will have to find the tr element with respective clicked button 
 
Try this: 
 
 
  
  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">

更多推荐

class,type,javascript,电脑培训,计算机培训,IT培训"/> <meta name="descrip