我有一个简单的表单，可以在单击 一个绿色按钮。
我希望第二个红色按钮出现在绿色按钮的右侧 第一次点击绿色按钮后。
我想要这个红色按钮来删除最近的一行字段 每次点击都会添加
我希望当所有添加的行都消失时红色按钮消失 已被删除。
谁能帮我解决这个问题？显然，我对 javascript 或 jquery 不是很有经验。
代码如下:
test.php
<form role="form">
<h3>
Band Details
<small>Enter each band name and primary contact information...</small>
</h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
</div>
</div>
</div>
</form>
Javascript:
var band_i = 0;
function addNewBandRow() {
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
}
最佳答案
测试副本
<html>
<head>
<script>
var band_i = 0;
var click = 0;
function addNewBandRow() {
click++;
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
if (click === 1) {
var rmDiv = document.createElement('div');
rmDiv.innerHTML = '<div id="remove">Remove</div>';
document.getElementById('remover').appendChild(rmDiv);
}
}
function removeNewBandRow() {
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
//console.log(children.length);
if (children.length === 3) {
var redbutton = document.getElementById("remover");
redbutton.parentNode.removeChild(redbutton);
}
}
</script>
</head>
<body>
<form role="form">
<h3>
Band Details
<small>Enter each band name and primary contact information...</small>
</h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div id="remover" onClick="removeNewBandRow();" ></div>
<div class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
</div>
</div>
</div>
</form>
</body>
</html>
关于javascript - 动态添加新字段后创建一个 "remove fields"按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38209404/