使用按钮输入进行追加并删除不起作用的父对象

Question

这里我有一个使用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>

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

由于@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>