js 动态的新增和删除一行input框,只有最后一行有新增按钮和删除按钮,其他行只有删除按钮,当只剩一行的时候只有新增按钮
时间: 2024-02-06 17:12:28 浏览: 25
可以使用jQuery来实现动态新增和删除一行input框的功能。以下是示例代码:
```html
<!-- HTML代码 -->
<div id="container">
<div class="row">
<input type="text" name="input[]">
<button class="delete-btn">删除</button>
</div>
<button id="add-btn">新增</button>
</div>
```
```javascript
// JavaScript代码
$(function() {
// 初始化,只有一行时隐藏删除按钮
$('.row').not(':last').find('.delete-btn').hide();
// 新增按钮点击事件
$('#add-btn').click(function() {
var newRow = $('<div class="row"><input type="text" name="input[]"><button class="delete-btn">删除</button></div>');
newRow.insertBefore('#add-btn');
$('.delete-btn').show(); // 显示所有删除按钮
$('.row').not(':last').find('.delete-btn').hide(); // 隐藏除最后一行外的所有删除按钮
});
// 删除按钮点击事件
$(document).on('click', '.delete-btn', function() {
$(this).parent().remove();
if ($('.row').length === 1) {
$('.delete-btn').hide(); // 只剩一行时隐藏删除按钮
} else {
$('.row').not(':last').find('.delete-btn').show(); // 显示除最后一行外的所有删除按钮
}
});
});
```
以上代码实现了以下功能:
- 页面加载时,只有一行输入框和一个新增按钮,没有任何删除按钮。
- 点击新增按钮时,在最后一行输入框的下面新增一行,并显示所有删除按钮,但除了最后一行外的所有删除按钮都隐藏。
- 点击某一行删除按钮时,删除该行,并根据当前行数(除了新增按钮外)决定是否隐藏其他删除按钮。如果只剩一行,则隐藏所有删除按钮,否则只隐藏除最后一行外的所有删除按钮。