input框动态的增加和删除
时间: 2024-03-05 11:52:11 浏览: 23
实现 input 框动态增加和删除可以通过以下步骤:
1. 在 HTML 中创建一个初始的 input 框。
```html
<div id="input-container">
<input type="text" name="input1">
</div>
```
2. 添加一个按钮,用于动态添加 input 框。
```html
<button id="add-input">添加</button>
```
3. 在 JavaScript 中,监听按钮的点击事件,并在点击时添加一个新的 input 框。
```javascript
const addButton = document.getElementById("add-input");
const container = document.getElementById("input-container");
let inputCount = 1;
addButton.addEventListener("click", () => {
inputCount++;
const newInput = document.createElement("input");
newInput.type = "text";
newInput.name = "input" + inputCount;
container.appendChild(newInput);
});
```
4. 添加一个删除按钮,用于删除最后添加的 input 框。
```html
<button id="remove-input">删除</button>
```
5. 在 JavaScript 中,监听删除按钮的点击事件,并在点击时删除最后添加的 input 框。
```javascript
const removeButton = document.getElementById("remove-input");
removeButton.addEventListener("click", () => {
const inputs = container.getElementsByTagName("input");
if (inputs.length > 1) {
container.removeChild(inputs[inputs.length - 1]);
inputCount--;
}
});
```
这样就可以实现 input 框的动态增加和删除了。