使用Javascript错误在表中添加和删除文本框

Question

我想在表格中添加和删除textbox。

我确实在textbox中添加了table。

我很困惑，要删除表格中的textbox。

这是我的代码：

＆＃13;

＆＃13;

$(function () {
   $('.more').on('click', function () {
        var $table = $('#input_fields');
        var $tr = $table.find('tr').eq(0).clone();
        $tr.appendTo($table).find('input').val('');
    });
});

$(function () {
   $('.delete').on('click', function () {
   
    });
});

＆＃13;

.delete{color:#ff0000;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post"> 
    <table id="input_fields">
        <tr> 
            <td><input class="orderinput" type="text" name="product[]" /></td> 
            <td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
            <td> <span class='delete'>Delete</span></td>
        </tr>
    </table>
</form>

<input class="more" type="button" value="Addmore" name="addmore" />

＆＃13;

＆＃13;

＆＃13;

这是我的示例代码链接：https://jsfiddle.net/vo9j2LcL/

请帮助我remove功能

Answer 1

使用event delegation在动态生成的元素上侦听click事件。

$(function() {
  // cache the table reference
  var $table = $('#input_fields');

  // keep a cloned copy to generate new
  var $tr = $table.find('tr').eq(0).clone();

  $('.more').on('click', function() {
    // clone to generate new and then append
    $tr.clone().appendTo($table).find('input').val('');
  });

  // set click event handler
  $table.on('click', '.delete', function() {
    // check number of tr
    if ($('#input_fields').find('tr').length > 1) {
      // remove the tr corresponds to clicked element
      $(this).closest('tr').remove();
    }
  });
});

.delete {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
  <table id="input_fields">
    <tr>
      <td><input class="orderinput" type="text" name="product[]" /></td>
      <td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
      <td> <span class='delete'>Delete</span></td>
    </tr>
  </table>
</form>

<input class="more" type="button" value="Addmore" name="addmore" />