JS实现表单增加、删除功能,相关代码示范与解析
时间: 2023-08-31 08:21:04 浏览: 155
### 回答1:
使用JavaScript实现表单增加和删除功能,可以参考以下示例代码:// 增加表单
function addForm(){
var form = document.createElement("form");
form.setAttribute("id", "form");
form.setAttribute("name", "form");
form.innerHTML = '<input type="text" name="name" id="name" placeholder="姓名"/><input type="text" name="age" id="age" placeholder="年龄"/>';
document.body.appendChild(form);
}
// 删除表单
function removeForm(){
var form = document.getElementById("form");
document.body.removeChild(form);
}
### 回答2:
在JavaScript中,实现表单的增加和删除功能可以通过DOM操作来完成。
首先,我们需要在HTML中创建一个表单元素,例如:
```html
<form id="myForm">
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="邮箱">
<button type="button" onclick="addForm()">新增</button>
</form>
```
接下来,在JavaScript中,我们可以使用`document.createElement`方法来动态创建新的表单元素。在新增按钮的点击事件中,我们调用`addForm()`函数:
```javascript
function addForm() {
var form = document.getElementById("myForm"); // 获取表单元素
var newForm = form.cloneNode(true); // 克隆表单元素
form.parentNode.insertBefore(newForm, form.nextSibling); // 在表单后面插入新的表单
}
```
上述代码中,首先获取表单元素`myForm`,然后通过`cloneNode`方法克隆表单元素。克隆节点的参数`true`表示同时克隆元素的子节点。最后,使用`insertBefore`方法将新的表单插入到原表单的下一个兄弟节点后面。
要实现删除表单的功能,可以在表单中添加一个删除按钮,并为该按钮绑定一个点击事件。例如,在表单元素的末尾添加一个删除按钮:
```html
<form id="myForm">
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="邮箱">
<button type="button" onclick="addForm()">新增</button>
<button type="button" onclick="removeForm(this)">删除</button>
</form>
```
接着,在JavaScript中编写`removeForm()`函数来实现删除表单的功能:
```javascript
function removeForm(button) {
var form = button.parentNode; // 获取父节点(即表单元素)
form.parentNode.removeChild(form); // 删除表单元素
}
```
上述代码中,通过`button`参数获取到按钮元素,然后使用`parentNode`获取到父节点(即表单元素),最后使用`removeChild`方法将表单元素从DOM中移除。
通过以上的代码示范与解析,我们可以实现表单的动态增加和删除功能。
### 回答3:
实现表单的增加和删除功能可以使用JavaScript来处理,以下是一个相关代码示范和解析:
首先,在HTML页面中,我们需要一个表单元素和两个按钮,一个用于增加表单项,一个用于删除表单项。例如:
```html
<form id="myForm">
<input type="text" name="name" placeholder="姓名">
<input type="text" name="email" placeholder="邮箱">
</form>
<button onclick="addForm()">增加表单项</button>
<button onclick="deleteForm()">删除表单项</button>
```
在JavaScript中,我们需要编写两个函数`addForm()`和`deleteForm()`来实现增加和删除表单项的功能。
首先是增加表单项的函数:
```javascript
function addForm() {
var form = document.getElementById("myForm"); // 获取表单元素
var input = document.createElement("input"); // 创建一个新的input元素
input.type = "text"; // 设置input元素的类型为文本框
input.name = "address"; // 设置input元素的name属性
input.placeholder = "地址"; // 设置input元素的placeholder属性
form.appendChild(input); // 将新建的input元素添加到表单中
}
```
解析:首先我们通过`document.getElementById("myForm")`获取到表单元素,然后使用`document.createElement("input")`创建一个新的input元素。我们可以设置该元素的类型(`input.type`),name属性(`input.name`),以及placeholder属性(`input.placeholder`)。最后,通过`form.appendChild(input)`将该input元素添加到表单中。
接下来是删除表单项的函数:
```javascript
function deleteForm() {
var form = document.getElementById("myForm"); // 获取表单元素
var inputs = form.getElementsByTagName("input"); // 获取表单中所有的input元素
var lastInput = inputs[inputs.length - 1]; // 获取最后一个input元素
form.removeChild(lastInput); // 从表单中删除最后一个input元素
}
```
解析:我们首先通过`document.getElementById("myForm")`获取到表单元素,然后使用`form.getElementsByTagName("input")`获取到表单中所有的input元素。然后我们取得最后一个input元素(即要删除的表单项),并使用`form.removeChild(lastInput)`将其从表单中删除。
通过以上代码示范,我们可以通过JavaScript实现表单的增加和删除功能。