删除jQuery动态表单隐藏按钮以删除最后一个表单输入
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了删除jQuery动态表单隐藏按钮以删除最后一个表单输入相关的知识,希望对你有一定的参考价值。
当表单仍然是一个表单时,我最初隐藏了删除按钮,但是当表单很多时,用户删除了所有表单,那么我想要的最后一个表单不应被删除/隐藏。请帮助。
这是我的代码:
<!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>
答案
您可以在if ($('#dynamic tr').length == 1) $('#dynamic .btn_remove').hide();
之后添加类似的内容:$('#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>
另一答案
提出条件
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
if(no>1){
$('#row'+button_id+'').remove();
}
});
以上是关于删除jQuery动态表单隐藏按钮以删除最后一个表单输入的主要内容,如果未能解决你的问题,请参考以下文章