html 动态文本框的值,HTML Javascript动态添加和删除文本框
我正在尝试使用javascript和HTML动态添加和删除文本框.
我可以添加和删除它,但有时“删除”按钮不起作用.当我检查元素时,它说删除按钮没有onclick值.我不明白为什么在添加功能中设置onclick时的原因.
这是我的代码:
Requirements
var reqs_id = 0;
function removeElement(elementId,elementId2) {
// Removes an element from the document
var element2 = document.getElementById(elementId2);
var element = document.getElementById(elementId);
element2.parentNode.removeChild(element2);
element.parentNode.removeChild(element);
}
function add() {
reqs_id++;// increment reqs_id to get a unique ID for the new element
//create textbox
var input = document.createElement('input');
input.type = "text";
input.setAttribute("class","w3-input w3-border");
input.setAttribute('id','reqs'+reqs_id);
var reqs = document.getElementById("reqs");
//create remove button
var remove = document.createElement('button');
remove.setAttribute('id','reqsr'+reqs_id);
remove.onclick = function() {removeElement('reqs'+reqs_id,'reqsr'+reqs_id);return false;};
remove.setAttribute("type","button");
remove.innerHTML = "Remove";
//append elements
reqs.appendChild(input);
reqs.appendChild(remove);
}
Add
解决方法:
这将起作用:
Requirements
var reqs_id = 0;
function removeElement(ev) {
var button = ev.target;
var field = button.previousSibling;
var div = button.parentElement;
div.removeChild(button);
div.removeChild(field);
}
function add() {
reqs_id++; // increment reqs_id to get a unique ID for the new element
//create textbox
var input = document.createElement('input');
input.type = "text";
input.setAttribute("class", "w3-input w3-border");
input.setAttribute('id', 'reqs' + reqs_id);
input.setAttribute('value', reqs_id);
var reqs = document.getElementById("reqs");
//create remove button
var remove = document.createElement('button');
remove.setAttribute('id', 'reqsr' + reqs_id);
remove.onclick = function(e) {
removeElement(e)
};
remove.setAttribute("type", "button");
remove.innerHTML = "Remove" + reqs_id;
//append elements
reqs.appendChild(input);
reqs.appendChild(remove);
}
Add
标签:html,javascript
来源: https://codeday.me/bug/20191025/1927147.html
html 动态文本框的值,HTML Javascript动态添加和删除文本框相关推荐
- 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿 公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
- layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
- php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 选项 $(function(){ // 添加选项 $("#opbtn").cli ...
- cefsharp获取ajax返回值,使用javascript从CefSharp浏览器获取文本框的值
我有一个Winforms应用程序,它具有ChromiumWebBrowser控件和一些基本的Windows控件.我希望能够点击一个按钮,调用JavaScript来获取浏览器中的文本框的值,并将返回的值 ...
- html表单的复选框的值,关于表单:HTML复选框的checked属性的正确值是什么?
我们都知道如何在HTML中形成一个复选框输入: 我不知道 - 复选复选框的技术正确值是什么? 我看到这些都有效: 答案是无关紧要的吗? 我没有看到证据证明答案在规范中标记为正确: Checkboxes ...
- Django使用JavaScript弹出确认删除提示框
问题描述:删除数据时,为了避免误删,要在删除之前弹出提示框,用户点击确认删除之后才将相应数据删除. 工具与环境:JavaScript web开发 Django框架 python 1.JavaScrip ...
- 动态给div追加html代码,javascript – 动态添加/删除div到html
删除: var div = document.getElementById('xyz'); if (div) { div.parentNode.removeChild(div); } 或者如果您不控制 ...
- html实现动态多表单输入,使用javascript动态编辑多个相同的HTML表单
我正在构建一个小的网页,该网页将用于通过预定义的设置操作来控制一组RGB led.为了以图形方式配置操作,将使用一个包含开始和结束像素,相关颜色信息以及要使用的设置操作的表单. (顺便说一句,不提交表 ...
- rowspan 动态变化_rowspan相同值合并 怎么动态的rowspan合并行
php 怎么控制表格,相同数据合并显示一行 Html中colspan属性和rowspan属性合并后该单元格的一个是合并行.一个合并列 colspan=2就代表合并他和他同一列的后一个单元格 rowsp ...
- 文本框阴影怎么去掉html,关于html:删除文本输入的内部阴影
所以我有一个文本输入,我使用HTML5,在Chrome上,我想改变一个文本输入的外观,我去掉了焦点上的轮廓(在Chrome上是橙色的),我把背景设置为浅色#f1f1f1,但是现在在顶部和左侧有一个更厚 ...
最新文章
- SM01 事务代码的加锁以及解锁
- poj 2112 Optimal Milking(二分+Floyd+最大流)
- PAT L1-048 矩阵A乘以B
- 常见特征检测算法介绍
- 软件工程网络15个人阅读作业2
- 关于SVN限制填写备注和自动更新代码到网站的研究
- VM上安装Redhat无法选包
- vue项目开发实战案例
- 免费又好用的Redis可视化工具,强烈推荐!
- android获取角速度,android dyrscope sensor 角速度传感器调试
- dell笔记本耳机怎么设置_戴尔电脑插耳机不弹出那个框怎么办_win10插入耳机弹不出对话框的解决方法...
- 毕业设计——基于Spring boot框架的 AI智能大数据医疗诊断平台
- zabbix——分布式监控系统
- (java)密码加密。某系统的数字密码,比如1983,采用加密方式进行传输,规则如下:先得到每位数,然后每位数都加上5,再对10求余,最后将所有数字反转,得到一串新数。
- 【知识图谱】Neo4j Cypher查询语言详解
- OOALV的基本实现步骤
- 史上最简单的docker入门到放弃——(利用docker部署web应用)
- shader graph_在Shader Graph中使用表面梯度框架进行法线贴图合成
- 【七天入门Go语言】程序结构 数据类型 | 第二天
- 易语言运行 (c:内部.exe, 假, ),利用易语言编写流氓软件
热门文章
- 英语流利说 level4 unti2 part1-extinction events 1
- mysqldump 中参数 --set-gtid-purged 控制 SET @@GLOBAL.GTID_PURGED和 SET @@SESSION.SQL_LOG_BIN
- 2022-Java学习路线梳理
- 粪斗这杆大旗下,注定只是少部分人的盛宴
- PS如何设置打印尺寸显示图像和实际纸张大小一致
- 通过二进制头识别文件类型
- 计算机二级web最全真题题库下载
- java 求矩阵的伴随矩阵_求矩阵伴随矩阵的java实现
- 微信小程序-----消息模版(最全解释)
- 正确理解文件与目录的可读、可写、可执行权限