jQuery id로 제거

Question

필드 집합에 테스트를 추가하고 추가 할 수 있지만 정확한 함수를 작성하여 제거하는 방법을 잘 모르겠습니다. 내가 자바 스크립트에서 일하고 있었지만 JQuery를 사용하여 작성하도록 요청 받았고 제대로 작동하지 않는 것처럼 보였다. 내가 조사한 모든 예제는 그 안에 제거 버튼을 만드는 원래의 복제 기능과 함께 작동하지 않는 것 같습니다. 필드 세트도 복제되고 이미이 코드가 작동합니다.이 이벤트 제거 기능에 대한 약간의 도움이 필요합니다. 여기

는 자바 스크립트/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를 가져와 제거 할 수 있습니다. 그런 다음 i를 감소시킵니다. 이 시도 :

편집 (수정 코드) :

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

는 첫째, 당신이 당신의 HTML 코드에서 버튼의 ID를 변경해야합니다.

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

와 자바 스크립트의

, 그것은해야한다 :

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) 제거 기능 :

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