附加按钮输入并删除父母不工作[重复]答案

【问题标题】：append with button input and remove parents not working [duplicate]附加按钮输入并删除父母不工作[重复]
【发布时间】：2022-01-21 22:08:24
【问题描述】：

这里我有一个使用 jquery 的简单 append function，它工作正常

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

如果button 已经存在就可以工作，但是当我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>

【问题讨论】：

标签： javascript html jquery css

【解决方案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>

【讨论】：

我试过了，还是不行
我做了一个小提琴，它工作正常：jsfiddle.net/Alex197/y40kq2x6/1
是的，非常感谢

【解决方案2】：

正如 @alex197 所说，您需要替换 $(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>

【讨论】：