附加按钮输入并删除不工作的父母

Question

这里我有一个使用jquery的简单append function，它工作得很好。

但是在这里，我想点击append button和remove parent tr，这就是我使用remove parent的问题，但是它不起作用

如果button已经存在，则可以工作，但是当我使用add按钮函数创建一个新的input时，它无法工作。

​

$(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>

​

Answer 1

用$(document).on('click', '.delete-row', function(){})替换您的事件，它会为页面上的所有“..add row”创建一个事件，甚至是新的。

如果只使用$('.delete-row').click(function(){})，则只为现有行而不是动态行创建事件。

看看这把小提琴：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>

​

Answer 2

正如@ need 197所说的，您需要替换$(document).on('click', '.add-row', function(){})，

检查下面的工作代码

​

$(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>

​