我是 JavaScript 的初学者。我使用 bootstrap 制作了 3 个输入字段。我想动态添加/删除这些字段。我使用 JavaScript 来添加更多选项(下面给出的照片)。
但我也想要一个删除选项。我看到了很多 JavaScript/jquery 教程和许多示例片段来理解添加/删除选项，但我坚持这一点。我想做我的 3 个输入字段，就像这个(照片如下)
现在这是代码:
<!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>
请给我一些关于添加/删除选项的想法。请让我知道更多信息。谢谢
最佳答案
免责声明:以下代码片段可以进行改进，但它只是告诉您总体思路。
http://jsfiddle.net/Lox5w8ge/1/
首先，id 应该是唯一的，所以永远不要重复它们!我删除了 child_div id 并将其设为一个类。由于您确实包含了 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();
});
我首先从找到的第一个 child_div 中获取 html，并将其插入到用于添加 div 的按钮之前。
为了再次删除 child_div ，我首先使用 jquery 的特定类 deleteButton 添加了一个按钮，我添加了一个单击事件，当单击此类按钮时，将找到包含此按钮的 child_div 并将其删除。
关于javascript - 如何使用 JavaScript 动态删除多个输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34154165/