gpt4 book ai didi

javascript - jQuery动态表单隐藏按钮删除最后一个表单输入

转载 作者:行者123 更新时间:2023-11-28 16:56:53 27 4
gpt4 key购买 nike

我最初在表单仍然是一个时隐藏删除按钮,但是当有很多表单并且用户删除所有表单时,那么我想要的最后一个表单不应该被删除/隐藏。请帮忙。

这是我的代码:

<!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();

演示

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

关于javascript - jQuery动态表单隐藏按钮删除最后一个表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58912818/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com