删除jQuery动态表单隐藏按钮以删除最后一个表单输入

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了删除jQuery动态表单隐藏按钮以删除最后一个表单输入相关的知识,希望对你有一定的参考价值。

当表单仍然是一个表单时,我最初隐藏了删除按钮,但是当表单很多时,用户删除了所有表单,那么我想要的最后一个表单不应被删除/隐藏。请帮助。

这是我的代码:

<!doctype html>
<html lang="en">

<head>
  <title>Dynamic Form</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer/">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <table class="table" id="dynamic">
          <tr id="row1">
            <td>
              <div class="card-body">
                <div class="form-group">
                  <div class="table-responsive">
                    <input type="text" placeholder="Masukkan Nama" class="form-control" />
                  </div>
                </div>
              </div>
            </td>
            <td class="first_row" style="display:none;"><button type="button" id="1" class="btn btn-danger btn_remove">Hapus</button></td>
          </tr>
        </table>
        <button type="button" id="tambah" class="btn btn-success">Add</button>
      </div>
    </div>
  </div>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {

      var no = 1;
      $('#tambah').click(function() {
        $('.first_row').show();
        no++;
        $('#dynamic').append('<tr id="row' + no + '"><td><div class="card-body"><div class="form-group"><div class="table-responsive"><input type="text" name="name[]" placeholder="Masukkan Nama" class="form-control" /></div></div></div></td><td><button type="button" id="' + no + '" class="btn btn-danger btn_remove">Hapus</button></td></tr>');
      });

      $(document).on('click', '.btn_remove', function() {
        var button_id = $(this).attr("id");
        $('#row' + button_id + '').remove();
      });
    });
  </script>
</body>

</html>
答案

您可以在if ($('#dynamic tr').length == 1) $('#dynamic .btn_remove').hide();之后添加类似的内容:$('#row'+button_id+'').remove();

Demo

$(document).ready(function() {

  var no = 1;
  $('#tambah').click(function() {
    $('.first_row').show();
    no++;
    $('#dynamic').append('<tr id="row' + no + '"><td><div class="card-body"><div class="form-group"><div class="table-responsive"><input type="text" name="name[]" placeholder="Masukkan Nama" class="form-control" /></div></div></div></td><td><button type="button" id="' + no + '" class="btn btn-danger btn_remove">Hapus</button></td></tr>');
  });

  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
    if ($('#dynamic tr').length == 1) $('#dynamic .btn_remove').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table" id="dynamic">
        <tr id="row1">
          <td>
            <div class="card-body">
              <div class="form-group">
                <div class="table-responsive">
                  <input type="text" placeholder="Masukkan Nama" class="form-control" />
                </div>
              </div>
            </div>
          </td>
          <td class="first_row" style="display:none;"><button type="button" id="1" class="btn btn-danger btn_remove">Hapus</button></td>
        </tr>
      </table>
      <button type="button" id="tambah" class="btn btn-success">Add</button>
    </div>
  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
另一答案

提出条件

$(document).on('click', '.btn_remove', function(){
      var button_id = $(this).attr("id");
      if(no>1){ 
          $('#row'+button_id+'').remove();
      }
    });

以上是关于删除jQuery动态表单隐藏按钮以删除最后一个表单输入的主要内容,如果未能解决你的问题,请参考以下文章

动态创建或删除表单元素

Extjs 无法在表单面板中动态添加/删除字段

在动态 jQuery 表单中选择特定选项时显示输入

使用带有添加和删除元素条件的 jQuery 克隆表单

添加/删除按钮不适用于重复的表单字段 - jquery

以form表单重用方式进行数据列表行删除