html表单添加修改删除,从html表单添加和删除元素的最佳方法

我想用不同的输入元素创建一个简单的html表单。每个问题的问题和可能的选择都存储在数据库中。这样做是为了使与PHP的形式和子输入元素,所以一个简单的PHP函数将根据是否为type="text"或type="radio"排版的护理:从html表单添加和删除元素的最佳方法

First name:

Last name:

Male

Female

Maiden name:

现在,缺省情况input id="5"将被禁用。但我也想删除它。我能够在我的头加载(虽然我不能保证招很聪明)使用JavaScript来得到它

$(document).ready(function(){

$("[disabled=disabled]").parent().remove();

});

到目前为止好,div元素被移除。然而,当单击与Female对应的单选按钮时,我想将元素放回原始位置。我在标题中添加,略低于之前的js脚本这个

它加载这一功能

// enable_elements.js

$(document).ready(function(){

$('#4').click(function(){

$('#5').prop("disabled", false);

});

});

然而,所有的东西不起作用。我想这个问题可能是我的ready(function)只在开始时加载一次,然后进入睡眠状态?我应该以不同的方式构建我的表单吗

2014-10-27

CptNemo

+0

如果您想稍后将其添加回去,为什么要删除该元素?将它隐藏起来没有任何意义吗? http://api.jquery.com/hide/ –

2014-10-27 06:13:17

+0

取决于你想达到什么,[你可以用CSS做到这一点](http://jsbin.com/jiqej/1/edit?html,css,output) ... –

2014-10-27 06:14:36

+0

ready函数确保在DOM加载后加载函数。如你所说,它不会让任何东西入睡。 –

2014-10-27 06:15:15

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用原生JS实现表单添加删除的完整代码示例: HTML代码: ```html <form id="myForm"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name" required> </div> <div> <label for="email">Email:</label> <input type="email" id="email" name="email" required> </div> <div> <label for="phone">Phone:</label> <input type="tel" id="phone" name="phone" required> </div> <div id="formBtns"> <button type="button" id="addBtn">Add</button> </div> </form> ``` JS代码: ```javascript // 获取表单元素和按钮元素 const myForm = document.getElementById("myForm"); const addBtn = document.getElementById("addBtn"); // 添加按钮点击事件监听器 addBtn.addEventListener("click", function() { // 克隆第一个表单项 const firstForm = myForm.children[0]; const newForm = firstForm.cloneNode(true); // 重置新表单项中的输入框内容 const inputs = newForm.querySelectorAll("input"); inputs.forEach(input => input.value = ""); // 添加表单项 myForm.insertBefore(newForm, myForm.lastElementChild); // 添加删除按钮 const deleteBtn = document.createElement("button"); deleteBtn.type = "button"; deleteBtn.textContent = "Delete"; deleteBtn.addEventListener("click", function() { myForm.removeChild(newForm); myForm.removeChild(deleteBtn); }); myForm.insertBefore(deleteBtn, myForm.lastElementChild); }); ``` 在这个示例中,我们首先获取表单元素和添加按钮元素。然后,我们添加一个点击事件监听器来处理添加按钮的点击事件。在事件处理程序中,我们克隆第一个表单项,重置新表单项中的输入框内容,并将其添加表单中。然后,我们创建一个删除按钮,并添加一个点击事件监听器来处理删除按钮的点击事件。在事件处理程序中,我们从表单删除表单项和删除按钮。 注意:在这个示例中,我们使用了insertBefore()方法添加表单项和删除按钮。这个方法接受两个参数:要添加的节点和参考节点。我们使用表单的lastElementChild属性作为参考节点,以确保新表单项和删除按钮被添加表单的最后一个位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值