jQuery刪除編號

Question

我在字段集中添加測試，雖然我可以添加它們，但我不確定如何編寫正確的函數來刪除它們。我曾在JavaScript中工作，但被要求使用JQuery編寫它，似乎無法使其工作。我研究過的所有例子似乎都不適用於我的原始克隆函數，它在其中構建了一個刪除按鈕。字段集也是重複的，我已經有了代碼工作，只需要一點幫助就可以使用這個刪除事件函數。

這的JavaScript/jquery的：

document.getElementById('button').onclick = duplicate; 

var i = 0; 
var original = document.getElementById('dataTes'); 

function duplicate() { 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "dataTes" + ++i; // there can only be one element with an ID 
    original.parentNode.appendChild(clone); 
} 

function remove(){ 

} 

下面是HTML：ⅰ的

<fieldset> 
<legend>Test</legend> 
<input type="submit" class="button" id = "button" value="+" onlick="duplicate()" title = "#"> 
<input type="submit" class="button" id = "button" value="-" onlick="remove()" title = "#"> 
<div id="dataTes"> 
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%"> 
    <tr> 
     <td width="100px">Test</td> 
     <td width="2px">:</td> 
     <td width="2px"><input type="text" name="usrname"></td> 
     <td> 
      <input type="submit" class="button" id = "add" value="+" onClick="addRow('#')" title = "#"> 
      <input type="submit" class="button" id = "add" value="-" onClick="deleteRow('#')" title = "#"> 
     </td> 
    </tr> 

    <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%"> 
     <tr> 
      <td width="2px"></td> 
      <td width="100px">Fill</td> 
      <td width="2px">:</td> 
      <td><input type="text" name="usrname"></td> 
     </tr> 
     <tr> 
      <td width="2px"></td> 
      <td width="100px">Fill</td> 
      <td width="2px">:</td> 
      <td><input type="text" name="usrname"></td> 
     </tr> 
     <table id="dataID" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%"> 
      <tr> 
       <td width="2px"></td> 
       <td width="100px">Fill</td> 
       <td width="2px">:</td> 
       <td> 
        <input type="text" name="usrname"> 
       </td> 
      </tr> 
     </table> 
    </table> 


</table> 
</div> 
</fieldset> 

Answer 1

這裏是快速和完整的解決方案。刪除你的內聯函數元素add和remove按鈕和連接事件，他們id如下：

var id = 0; //global id to create unique id 
 

 
$(document).ready(function() { 
 
    //attach click event to element/button with id add and remove 
 
    $("#add,#remove").on('click', function() { 
 
    var currentElemID = $(this).attr('id'); //get the element clicked 
 

 
    if (currentElemID == "add") { //if it is add elem 
 
     var cloneParent = $("#dataTes").clone(); //clone the dataTes element 
 
     id=$("div[id^=dataTes]").length;//get the count of dataTes element 
 
     //it will be always more than last count each time 
 
     cloneParent.find('[id]').each(function() { 
 
     //loop through each element which has id attribute in cloned set and replace them 
 
     //with incremented value 
 
     var $el = $(this); //get the element 
 
     $el.attr('id', $el.attr('id') + id); 
 
     //ids would now be add1,add2 etc., 
 
     }); 
 
     cloneParent.attr('id', cloneParent.attr('id') + id);//replace cloneParent id 
 
     cloneParent.appendTo('fieldset');//append the element to fieldset 
 
     $("#remove").show();//show remove button only if there is more than one dataTes element 
 
    } else { 
 
     $("div[id^=dataTes]:last").remove(); 
 
     //just remove the last dataTes 
 
     //[id^=dataTes]:last annotates remove last div whose id begins with dataTes 
 
     //remember we have id like dataTes1,dataTes2 etc 
 
     if($("div[id^=dataTes]").length==1){ 
 
     //check if only one element is present 
 
     $("#remove").hide();//if yes hide the remove button 
 
     } 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
    <legend>Test</legend> 
 
    <input type="submit" class="button" id="add" value="+" title="#"> 
 
    <input type="submit" class="button" id="remove" value="-" style="display:none;" title="#"> 
 

 
    <!--hide the remove button with display:none initially--> 
 

 
    <div id="dataTes"> 
 
    <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%"> 
 
     <tr> 
 
     <td width="100px">Test</td> 
 
     <td width="2px">:</td> 
 
     <td width="2px"> 
 
      <input type="text" name="usrname"> 
 
     </td> 
 
     <td> 
 
      <input type="submit" class="button" id="add" value="+" title="#"> 
 
      <input type="submit" class="button" id="sub" value="-" title="#"> 
 
     </td> 
 
     </tr> 
 

 
     <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%"> 
 
     <tr> 
 
      <td width="2px"></td> 
 
      <td width="100px">Fill</td> 
 
      <td width="2px">:</td> 
 
      <td> 
 
      <input type="text" name="usrname"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td width="2px"></td> 
 
      <td width="100px">Fill</td> 
 
      <td width="2px">:</td> 
 
      <td> 
 
      <input type="text" name="usrname"> 
 
      </td> 
 
     </tr> 
 
     <table id="dataID" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%"> 
 
      <tr> 
 
      <td width="2px"></td> 
 
      <td width="100px">Fill</td> 
 
      <td width="2px">:</td> 
 
      <td> 
 
       <input type="text" name="usrname"> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </table> 
 

 

 
    </table> 
 
    </div> 
 
</fieldset>

如線註釋解釋線。如果這讓你感到困惑，請告訴我。

Answer 2

值將是在上下文。因此，您可以獲取元素的ID並將其刪除。然後遞減我。試試這個：

編輯（校正碼）：

function remove(){ 
    var elId = "dataTes" + i; 
    var element = document.getElementById(elId); 
    element.parentNode.removeChild(element); 
    i--; 
} 

也首先，你需要更改按鈕的ID在你的HTML代碼。

<input type="submit" class="button1" id = "add" value="-" onClick="deleteRow('#')" title = "#"> 

和在JavaScript中，它應該是：

document.getElementById('button').onclick = duplicate; 
document.getElementById('button1').onclick = remove; 

Answer 3

1）重命名上的按鈕（最初兩個id="button"）的重複的ID。

<input type="submit" class="button" id = "button_duplicate" value="+" onlick="duplicate()" title = "#"> 
<input type="submit" class="button" id = "button_remove" value="-" onlick="remove()" title = "#"> 

2）綁定上正確按鈕duplicate()和remove()功能。相反，document.getElementById('button').onclick = duplicate;

$("#button_duplicate").click(function(){ 
    duplicate(); 
}); 
$("#button_remove").click(function(){ 
    remove(); 
}); 

3）刪除功能：

​​