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

我有一个简单的窗体，在点击一个绿色按钮时添加了一行额外的字段。在动态添加新字段后创建“删除字段”按钮？

我想第2个红色按钮，出现绿色按钮的绿色按钮被点击了第一时间之后的权利。
我想这个红色按钮，删除最近的领域的添加一行每被点击一次
我想为红色的按钮时，所有添加的行已被删除消失。

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

来源

2016-07-05 Matt Molsberry

一个有趣的方式来做到这一点会使用AngularJs，一个类似的例子是一个待办事项列表，您可以在[AngularJs（https://angularjs.org/） – rck6982

你真的使用jQuery看，因为它在您发布的JavaScript中不可见 - 并且不需要执行此功能。 –

测试复制

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

来源

2016-07-05 18:27:02

在高级别，这里有您需要的步骤实施：

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

实施例：

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

绑定事件处理程序的 “点击” JavaScript事件

实施例：

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

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

请让我知道这是否有帮助。

来源

2016-07-05 17:46:11

这应该是为了消除最后一个孩子。

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

来源

2016-07-05 17:53:33 NTL

你还不如用简单的隐藏语句是：

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>

来源

2016-07-05 20:12:01

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

回答

相关问题