创建一个“删除字段”按钮，在动态添加新字段后 - create a "remove fields" button after new fields are dynamically added?

我有一个简单的表单，在点击时添加了额外的一行字段绿色按钮。

我想第二个红色按钮出现在绿色按钮的右边第一次点击绿色按钮后
我希望这个红色按钮删除最近一行字段
我想为红色按钮消失时，所有添加的行

有谁能帮我一下吗?显然我对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>

在高层次上，以下是您需要实现的步骤:

生成新的红色按钮的HTML
这个新的红色按钮将根据条件隐藏和取消隐藏。

的例子:

if (condition) {
  $('#secondRedButton').hide();
} else {
  $('#secondRedButton').show();
}

http://api.jquery.com/hide/

为"click"JavaScript事件绑定一个事件处理程序

的例子:

$('#secondRedButton').click(function() {
  // do something
});

https://api.jquery.com/click/

如果有帮助请告诉我

您还不如使用如下的简单隐藏语句:

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>

这应该可以用于删除最后一个子节点。

function removeBandRow(){
 var container = document.getElementById("newBandRows")
 var children = container.childNodes;
 container.removeChild(children[children.length - 1]);
}