在動態添加新字段後創建「刪除字段」按鈕？

我有一個簡單的窗體，在點擊一個綠色按鈕時添加了一行額外的字段。在動態添加新字段後創建「刪除字段」按鈕？

我想第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

在動態添加新字段後創建「刪除字段」按鈕？

回答

相關問題