Javascript 在动态添加新字段后创建“删除字段”按钮？
我有一个简单的表单，在单击 绿色按钮 我想第二个红色按钮出现在绿色按钮的右边 单击后，绿色按钮将第一次单击 我想用这个红色按钮删除最近的一行字段 每次单击时添加 我希望在所有添加行时红色按钮消失 已被删除 有人能帮我吗？显然，我对javascript或jquery不是很有经验 代码如下： test.php Javascript:Javascript 在动态添加新字段后创建“删除字段”按钮？,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个简单的表单，在单击 绿色按钮 我想第二个红色按钮出现在绿色按钮的右边 单击后，绿色按钮将第一次单击 我想用这个红色按钮删除最近的一行字段 每次单击时添加 我希望在所有添加行时红色按钮消失 已被删除 有人能帮我吗？显然，我对javascript或jquery不是很有经验 代码如下： test.php Javascript: 在高层，以下是您需要实施的步骤： 为新的红色按钮生成HTML。 此新红色按钮将根据条件隐藏和取消隐藏。 例如： if (condition) { $('#secon
在高层，以下是您需要实施的步骤： 为新的红色按钮生成HTML。 此新红色按钮将根据条件隐藏和取消隐藏。 例如：
if (condition) {
$('#secondRedButton').hide();
} else {
$('#secondRedButton').show();
}
$('#secondRedButton').click(function() {
// do something
});
if (condition) {
$('#secondRedButton').hide();
} else {
$('#secondRedButton').show();
}
$('#secondRedButton').click(function() {
// do something
});
请让我知道这是否有帮助。在高层，以下是您需要实施的步骤： 为新的红色按钮生成HTML。 此新红色按钮将根据条件隐藏和取消隐藏。 例如：
if (condition) {
$('#secondRedButton').hide();
} else {
$('#secondRedButton').show();
}
$('#secondRedButton').click(function() {
// do something
});
if (condition) {
$('#secondRedButton').hide();
} else {
$('#secondRedButton').show();
}
$('#secondRedButton').click(function() {
// do something
});
请让我知道这是否有帮助。这应该适用于删除最后一个孩子
function removeBandRow(){
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
}
这应该适用于删除最后一个子项
function removeBandRow(){
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
}
<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>
<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>
您最好使用以下简单的隐藏语句：
var band_i = 0;
function addNewBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'addRowBtn'){
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row" id="' + band_i + '"><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(band_i != 0){
c.style.display = 'block';
}
}
}
function removeBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'delRowBtn'){
var container = document.getElementById("newBandRows")
var nodes = container.childNodes;
container.removeChild(nodes[nodes.length - 1]);
band_i--;
if(band_i == 0)
c.style.display = 'none';
}
}
<div class="col-md-1">
<button type="button" name="addRowBtn" class="btn btn-success pull-left" onClick="addNewBandRow(this);">+</button>
<button type="button" name="delRowBtn" id="delBtn" class="btn btn-danger pull-left" onClick="removeBandRow(this);" style='display:none' >-</button>
</div>
您最好使用以下简单的隐藏语句：
var band_i = 0;
function addNewBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'addRowBtn'){
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row" id="' + band_i + '"><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(band_i != 0){
c.style.display = 'block';
}
}
}
function removeBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'delRowBtn'){
var container = document.getElementById("newBandRows")
var nodes = container.childNodes;
container.removeChild(nodes[nodes.length - 1]);
band_i--;
if(band_i == 0)
c.style.display = 'none';
}
}
<div class="col-md-1">
<button type="button" name="addRowBtn" class="btn btn-success pull-left" onClick="addNewBandRow(this);">+</button>
<button type="button" name="delRowBtn" id="delBtn" class="btn btn-danger pull-left" onClick="removeBandRow(this);" style='display:none' >-</button>
</div>
一个有趣的方法是使用AngularJs，一个类似的例子是todo列表，你可以在中看到你真的在使用jQuery，因为它在你发布的JavaScript中是不可见的，并且没有必要实现这个功能。一个有趣的方法是使用AngularJs，一个类似的例子是todo列表，您可以在中看到您是否真的在使用jQuery，因为它在您发布的JavaScript中不可见，并且对于实现此功能来说也不是必需的。