jQuery Удалить по id

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

значение I будет в контексте. Таким образом, вы можете получить идентификатор элемента и удалить его. Тогда декремент i. Попробуйте это:

EDIT (исправленный код):

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

также первое, что вам нужно изменить идентификатор кнопки в вашем 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").

<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) Средство удаления функции:

function remove(){ 
    if($("#dataTes" + i).length > 0){ 
     $("#dataTes" + i).remove(); 
     i--; 
    } 
}