jQuery dynamic form hide button remove for last form input

Question

I initially hide the remove button when the form is still one, but when there are many forms and the user deletes all the forms then what I want the last form should not be deleted / hidden. Please help.

This is my code :

<!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>

try to put condition in remove like this: if(id != '1') $('#row'+button_id+'').remove(); — Araz Shamsaddinlouy, Nov 18 '19 at 10:51
Setting an `id` attribute with only a numeric value is wrong, see https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html Then, regarding your question, you check how many `` are there: if there is only one then do not remove it. — Andrew, Nov 18 '19 at 10:54

score 3 · Answer 1 · answered Nov 18 '19 at 10:52

You could add something like: if ($('#dynamic tr').length == 1) $('#dynamic .btn_remove').hide(); after your $('#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>

@AbhishekPandey No problem, appreciate that you are honest, no hard feelings at all. — Carsten Løvbo Andersen, Nov 18 '19 at 10:56

score 0 · Answer 2 · answered Nov 18 '19 at 10:53

0

put a condition

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

answered Nov 18 '19 at 10:53

Amado

371
1
16

jQuery dynamic form hide button remove for last form input

2 Answers2