[英]How to do JavaScript to remove multiple input fields dynamically
i am a beginner in JavaScript.i made 3 input fields using bootstrap.i want to enable add/remove these fields dynamically.i did the JavaScript for add more option (photo given below). 我是JavaScript的初学者。我使用bootstrap做了3个输入字段。我想动态地启用添加/删除这些字段。我做了JavaScript以添加更多选项(下面给出的照片)。
But i also want a remove option.I saw many JavaScript/jquery tutorial & many sample snippets to understand both add/remove option,but i am stuck on that.I want to do my 3 input fields like this one (photo given below) 但是我也想要一个remove选项。我看了很多JavaScript / jquery教程和许多示例代码片段,以了解add / remove选项,但是我对此很执迷。我想像这样做3个输入字段(下面的照片)
Now here is code: 现在这里是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group" id="child_div">
<label for="day" class="col-xs-2 control-label"></label>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="" >Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3" >
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group" >
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-4" class="wb-inv">Amount:</label>
<div class="input-group" >
<input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
</div>
</div>
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script>
document.getElementById("create_button").onclick = function (){
var temp = document.getElementById("child_div").outerHTML;
document.getElementById("parent_div").innerHTML = document.getElementById("parent_div").innerHTML + temp;
}
</script>
</body>
</html>
please give me some idea on doing both add/remove option.please let me know for further information.Thanks 请给我一些关于同时执行添加/删除选项的想法。请让我知道更多信息。谢谢
DISCLAIMER : the following snippet can be refined, but it is just to tell you the general idea. 免责声明 :以下代码段可以完善,但这只是为了告诉您总体思路。
http://jsfiddle.net/Lox5w8ge/1/ http://jsfiddle.net/Lox5w8ge/1/
First of all id's should be unique, so never duplicate them! 首先,ID应该是唯一的,因此切勿重复! I removed the child_div
id and made it a class. 我删除了child_div
id并将其child_div
一个类。 Since you do include jQuery I decided to use it and use the powers it gives to add some events to the buttons and to select the correct elements. 由于您确实包含jQuery,因此我决定使用它并利用它提供的功能向按钮添加一些事件并选择正确的元素。
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
I first get the html from the first child_div
I find and insert it before the button used to add the div. 我首先从找到的第一个child_div
获取html,并将其插入到用于添加div的按钮之前。
To remove the child_div
again I first added a button to it with a specific class deleteButton
with jquery I added a click event that when clicked on this type of button will find the child_div
containing this button and then remove it. 为了再次删除child_div
,我首先使用jquery的特定类deleteButton
向其中添加了一个按钮,并添加了一个click事件,当单击这种类型的按钮时,该事件将找到包含该按钮的child_div
,然后将其删除。
By JQuery 通过JQuery
var x = 1;
var field ='<div><input type="text" name="field_name[]" value="" /><a href="javascript:void(0);" class="remove_button" title="Add field"><button class=" btn btn-danger" style=" margin:5px;">Remove This</button></a></div>'
$(".add_button").click(function(){
if(x < 10){
$(".input_field_wrapper").append(field);
x++;
}else{
alert("max ten field allowed");
}
});
$(".input_field_wrapper").on("click" ,".remove_button" , function(){
$(this).parent("div").remove();
x--;
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div id="parent_div1"></div>
<div class="row form-group" id="child_div">
<div>
<hr>
<div class="col-xs-12 col-lg-3">
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-1">
<input class="btn btn-success " type="button" id="create_button" value="+" />
</div>
</div>
</div>
</div>
</form>
</div>
<!-- var -->
<script>
var temp = '<div class="row form-group" id="child_div_append"><hr><div class="col-xs-12 col-lg-3"><div class="input-group" style=""><select class="form-control " id="employeetype"><option value="" disabled="" selected="" >Select Job Type</option><option value="10">1</option><option value="10">2</option><option value="10">3</option> </select></div></div><div class="col-xs-12 col-lg-3" ><div class="input-group" ><input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" /><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div><div class="col-xs-12 col-lg-3"><div class="input-group" ><input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" /><span class="input-group-addon"><i class="glyphicon glyphicon-usd">2</i></span></div></div><button onclick="remove(this)" type="button">Remove</button></div>';
document.getElementById("create_button").onclick = function() {
document.getElementById("parent_div1").innerHTML = document.getElementById("parent_div1").innerHTML + temp;
}
function remove(e) {
e.parentNode.remove();
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.