jQuery实现动态添加、删除按钮及input输入框的方法
这篇文章主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现动态添加、删除按钮及input输入框的方法。分享给大家供大家参考，具体如下：
<html>
<head>
<meta charset="utf-8">
<title>动态创建按钮</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a></span></p>
<div id="InputsWrapper">
<div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type='button' value='删除'></a></div>
</div>
<script>
$(document).ready(function() {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type="button" value="删除"></a></div>');
x++; //text box increment
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
</script>
</body>
</html>
-
2018-06-29 13:46:561
在下拉选择框中动态添加内容方式：
<select id="test">
<option value="1">option-1</option>
<option value="2">option-2</option>
<option value="3">option-3</option>
</select>
<div id="text">
<button class="btn btn-outline-info btn-sm">自定义</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
obj = $("#text");
x = obj.length; /*id为text的个数*/
$('button').click(function(){
if(x <= 1){
obj.append('<input type="text" id="val" placeholder="输入分类名称"/>');
obj.append('<input type="button" value="✔" onclick="addsel_delself()"/>');
obj.append('<input type="button" value="×" onclick="delself()"/>');
x++;
}
{#alert("input元素数量为:"+$("input").length); /*显示所有input元素的个数*/#}
});
});
function addsel_delself(){
opt = val = document.getElementById("val").value;
sel_ele = document.getElementById("test");
option = new Option(opt,val,true);
sel_ele.options.add(option);
$('#test').val(val);
{#document.getElementById("val").remove(); /*删除指定id的input框*/#}
{#$(this).remove(); /*删除自身*/#}
$('#text').remove(); /*删除指定id的div包含下的所有内容*/
{#document.getElementById("add_val").remove();#}
{#document.getElementById("del_val").remove();#}
}
function delself(){
$('#text').remove();
}
{#/*给所有按钮添加class='btn',删除class为btn的所有按钮*/#}
{#$(".btn").click(function(){#}
{# $(this).remove();#}
{# })#}
</script>