JavaScript动态添加和删除控件

最新推荐文章于 2021-06-04 21:17:39 发布

saiusky

最新推荐文章于 2021-06-04 21:17:39 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript function regex html up input

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在网页中动态添加和删除文本框的方法。通过JavaScript实现，每次点击“添加控件”按钮时会在指定区域增加一个文本输入框及对应的删除链接；点击“删除此控件”链接则会移除相应的文本框。该方法适用于表单制作和其他需要动态生成表单元素的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

< input type = " button " onClick = " add(); " value = " 添加控件 " >
< div id = " a " >

</ div >
< script >
var num = 0 ;
function add() ... {
alert(window.document.getElementById( " a " ).innerHTML);
window.document.getElementById( " a " ).innerHTML = window.document.getElementById( " a " ).innerHTML + " <br/><input type='text' id='up " + num + " '><a href='#' onClick='javascript:del( " + num + " );'>删除此控件 " + num + " </a> " ;
num = num + 1 ;
}
function del(n) ... {
var str = window.document.getElementById( " a " ).innerHTML;
var regEx = new RegExp( " <BR><[^<>]*(up " + n + " ){1}[^<>]*><[^<>]*>[^<>]*</A> " );
str = str.replace(regEx, "" );
alert(str);
window.document.getElementById( " a " ).innerHTML = str;
}
</ script >
方法二
//动态添加或删除新的文本框
var num=0;
function add(){
    var html="<input type='text' value='' name='poll[]' id='up"+num+"'><a href='#' onClick='javascript:del("+num+");' id='delBtn_"+num+"'>删除此项</a><br/>";
    new Insertion.Top('addInput',html);
    num=num+1;
}
function del(n){
    var node=document.getElementById("up"+n);
    var delButton=document.getElementById("delBtn_"+n);
    if(node){
        node.parentNode.removeChild(node);
        delButton.parentNode.removeChild(delButton);
    }
}

转自http://btyang.bloghome.cn/posts/85883.html