append with button input and remove parents not working

Question

Here i have a simple append function using jquery, it works fine

But here i want to append button and remove parent tr when clicked and that's the problem i use remove parent but it doesn't work

Works if the button already exists, but when I input a new one using the add button function it doesn't work

$(document).ready(function() {
    $(".add-row").click(function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var markup = `
              <tr>
                  <td>` + name + `</td>
                  <td>` + email + `</td>
                  <td><button type="button" class="delete-row">Delete Row</button></td>
              </tr>
            `;

        //VALIDATION
        if (name && email) {
            $("table tbody").append(markup);
            $('.req').remove();
        } else {
            $('.req').remove();
        }

        //REQUIRED
        if (!name) {
            $('#name').after(`
                <div class="req">
                    <small class="text-secondary text-danger" style="font-size: 10px;"> 
                        <i>* Nama Tidak Boleh Kosong</i>
                    </small>
                </div>
              `);
        }

        if (!email) {
            $('#email').after(`
                <div class="req">
                    <small class="text-secondary text-danger" style="font-size: 10px;"> 
                    <i>* Nama Tidak Boleh Kosong</i>
                    </small>
                </div>
              `);
        }
    });

    $(".delete-row").click(function() {
        $(this).parents("tr").remove();
    });

});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="container mt-2">
    <form>
      <div class="row">
        <div class="col-4">
            <input type="text" id="name" placeholder="Name" class="form-control" required>
        </div>
        <div class="col-4">
            <input type="text" id="email" placeholder="Email Address"  class="form-control" required>
        </div>
        <div class="col-4">
          <button type="button" class="add-row btn btn-success"> ADD </button>
        </div>
      </div>
    </form>
    <br>
    <br>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>One 1</td>
            <td>One 1</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
            <td>Two 2</td>
            <td>Two 2</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
        </tbody>
    </table>
   </div>

Alex197 · Accepted Answer · 2021-12-20T09:17:16.863

Replace your event by $(document).on('click', '.delete-row', function(){}), it creates an event for all '.add-row' on the page, even the new ones.

If you only use $('.delete-row').click(function(){}), this create an event only for the existing rows, not dynamic ones.

Check this fiddle: https://jsfiddle.net/Alex197/y40kq2x6/1/

$(document).ready(function(){
  $(document).on('click', ".add-row", function(){
    var name    = $("#name").val();
    var email   = $("#email").val();
    var markup  = `
      <tr>
      <td>`+name+`</td>
      <td>`+email+`</td>
      <td>
      <button type="button" class="delete-row">Delete Row</button>
      </td>
      </tr>
      `;

    //VALIDATION
    if(name && email){
      $("table tbody").append(markup);
      $('.req').remove();
    }else{
      $('.req').remove();
    }

    //REQUIRED
    if(!name){
      $('#name').after(`
        <div class="req">
        <small class="text-secondary text-danger" style="font-size: 10px;"> 
        <i>* Nama Tidak Boleh Kosong</i>
        </small>
        </div>
        `);
    }

    if(!email){
      $('#email').after(`
        <div class="req">
        <small class="text-secondary text-danger" style="font-size: 10px;"> 
        <i>* Nama Tidak Boleh Kosong</i>
        </small>
        </div>
        `);
    }
  });
        
  $(document).on('click', ".delete-row", function(){
    $(this).parents("tr").remove();
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="container mt-2">
    <form>
      <div class="row">
        <div class="col-4">
            <input type="text" id="name" placeholder="Name" class="form-control" required>
        </div>
        <div class="col-4">
            <input type="text" id="email" placeholder="Email Address"  class="form-control" required>
        </div>
        <div class="col-4">
          <button type="button" class="add-row btn btn-success"> ADD </button>
        </div>
      </div>
    </form>
    <br>
    <br>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>One 1</td>
            <td>One 1</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
            <td>Two 2</td>
            <td>Two 2</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
        </tbody>
    </table>
 </div>

I made a Fiddle and it works fine: https://jsfiddle.net/Alex197/y40kq2x6/1/ — Alex197, Dec 20 '21 at 09:14

score 1 · Answer 2 · answered Dec 20 '21 at 09:12

As @alex197 say you need to replace $(document).on('click', '.add-row', function(){}),
check below working code

$(document).ready(function(){

           $(".add-row").click(function(){
            var name    = $("#name").val();
            var email   = $("#email").val();
            var markup  = `
              <tr>
                <td>`+name+`</td>
                <td>`+email+`</td>
                <td>
                  <button type="button" class="delete-row">Delete Row</button>
                  </td>
                </tr>
            `;
          
            //VALIDATION
            if(name && email){
                $("table tbody").append(markup);
                $('.req').remove();
            }else{
                $('.req').remove();
            }
            
            //REQUIRED
            if(!name){
                $('#name').after(`
                <div class="req">
                  <small class="text-secondary text-danger" style="font-size: 10px;"> 
                    <i>* Nama Tidak Boleh Kosong</i>
                    </small>
                  </div>
              `);
            }
            
            if(!email){
                $('#email').after(`
                <div class="req">
                  <small class="text-secondary text-danger" style="font-size: 10px;"> 
                    <i>* Nama Tidak Boleh Kosong</i>
                    </small>
                  </div>
              `);
            }
        });
        

          $(document).on('click', '.delete-row', function(){
                $(this).parents("tr").remove();
        });
        
 });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="container mt-2">
    <form>
      <div class="row">
        <div class="col-4">
            <input type="text" id="name" placeholder="Name" class="form-control" required>
        </div>
        <div class="col-4">
            <input type="text" id="email" placeholder="Email Address"  class="form-control" required>
        </div>
        <div class="col-4">
          <button type="button" class="add-row btn btn-success"> ADD </button>
        </div>
      </div>
    </form>
    <br>
    <br>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>One 1</td>
            <td>One 1</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
            <td>Two 2</td>
            <td>Two 2</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
        </tbody>
    </table>
   </div>

append with button input and remove parents not working

2 Answers2