Question

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

我想第二个红色按钮出现在绿色按钮的右侧在第一次点击绿色按钮后。
我想要这个红色按钮来删除最近的一行字段每次点击都会添加
我想在所有添加的行中红色按钮消失已被删除。

任何人都可以帮我吗？我显然对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);
}

Answer 1

在较高的层面，以下是您需要实施的步骤：

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

示例：

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

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

将事件处理程序绑定到＆＃34;单击＆＃34; JavaScript事件

示例：

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

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

如果有帮助，请告诉我。

Answer 2

经过测试的副本

<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>

Answer 3

这应该适用于删除最后一个孩子。

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

Answer 4

您也可以使用简单的隐藏语句：

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>

在动态添加新字段后创建“删除字段”按钮？

4 个答案: