我正在尝试使用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动态添加和删除文本框相关推荐

  1. 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里

    本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿 公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...

  2. layui 表单动态添加、删除input框

    html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...

  3. php动态删除输入框,jQuery实现动态添加和删除input框实例代码

    本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 选项 $(function(){ // 添加选项 $("#opbtn").cli ...

  4. cefsharp获取ajax返回值,使用javascript从CefSharp浏览器获取文本框的值

    我有一个Winforms应用程序,它具有ChromiumWebBrowser控件和一些基本的Windows控件.我希望能够点击一个按钮,调用JavaScript来获取浏览器中的文本框的值,并将返回的值 ...

  5. html表单的复选框的值,关于表单:HTML复选框的checked属性的正确值是什么?

    我们都知道如何在HTML中形成一个复选框输入: 我不知道 - 复选复选框的技术正确值是什么? 我看到这些都有效: 答案是无关紧要的吗? 我没有看到证据证明答案在规范中标记为正确: Checkboxes ...

  6. Django使用JavaScript弹出确认删除提示框

    问题描述:删除数据时,为了避免误删,要在删除之前弹出提示框,用户点击确认删除之后才将相应数据删除. 工具与环境:JavaScript web开发 Django框架 python 1.JavaScrip ...

  7. 动态给div追加html代码,javascript – 动态添加/删除div到html

    删除: var div = document.getElementById('xyz'); if (div) { div.parentNode.removeChild(div); } 或者如果您不控制 ...

  8. html实现动态多表单输入,使用javascript动态编辑多个相同的HTML表单

    我正在构建一个小的网页,该网页将用于通过预定义的设置操作来控制一组RGB led.为了以图形方式配置操作,将使用一个包含开始和结束像素,相关颜色信息以及要使用的设置操作的表单. (顺便说一句,不提交表 ...

  9. rowspan 动态变化_rowspan相同值合并 怎么动态的rowspan合并行

    php 怎么控制表格,相同数据合并显示一行 Html中colspan属性和rowspan属性合并后该单元格的一个是合并行.一个合并列 colspan=2就代表合并他和他同一列的后一个单元格 rowsp ...

  10. 文本框阴影怎么去掉html,关于html:删除文本输入的内部阴影

    所以我有一个文本输入,我使用HTML5,在Chrome上,我想改变一个文本输入的外观,我去掉了焦点上的轮廓(在Chrome上是橙色的),我把背景设置为浅色#f1f1f1,但是现在在顶部和左侧有一个更厚 ...

最新文章

  1. SM01 事务代码的加锁以及解锁
  2. poj 2112 Optimal Milking(二分+Floyd+最大流)
  3. PAT L1-048 矩阵A乘以B
  4. 常见特征检测算法介绍
  5. 软件工程网络15个人阅读作业2
  6. 关于SVN限制填写备注和自动更新代码到网站的研究
  7. VM上安装Redhat无法选包
  8. vue项目开发实战案例
  9. 免费又好用的Redis可视化工具,强烈推荐!
  10. android获取角速度,android dyrscope sensor 角速度传感器调试
  11. dell笔记本耳机怎么设置_戴尔电脑插耳机不弹出那个框怎么办_win10插入耳机弹不出对话框的解决方法...
  12. 毕业设计——基于Spring boot框架的 AI智能大数据医疗诊断平台
  13. zabbix——分布式监控系统
  14. (java)密码加密。某系统的数字密码,比如1983,采用加密方式进行传输,规则如下:先得到每位数,然后每位数都加上5,再对10求余,最后将所有数字反转,得到一串新数。
  15. 【知识图谱】Neo4j Cypher查询语言详解
  16. OOALV的基本实现步骤
  17. 史上最简单的docker入门到放弃——(利用docker部署web应用)
  18. shader graph_在Shader Graph中使用表面梯度框架进行法线贴图合成
  19. 【七天入门Go语言】程序结构 数据类型 | 第二天
  20. 易语言运行 (c:内部.exe, 假, ),利用易语言编写流氓软件

热门文章

  1. 英语流利说 level4 unti2 part1-extinction events 1
  2. mysqldump 中参数 --set-gtid-purged 控制 SET @@GLOBAL.GTID_PURGED和 SET @@SESSION.SQL_LOG_BIN
  3. 2022-Java学习路线梳理
  4. 粪斗这杆大旗下,注定只是少部分人的盛宴
  5. PS如何设置打印尺寸显示图像和实际纸张大小一致
  6. 通过二进制头识别文件类型
  7. 计算机二级web最全真题题库下载
  8. java 求矩阵的伴随矩阵_求矩阵伴随矩阵的java实现
  9. 微信小程序-----消息模版(最全解释)
  10. 正确理解文件与目录的可读、可写、可执行权限