2013-11-28 4 views
0

삭제할 행 집합이 있지만 jquery 제거를 사용하면 제거되지 않습니다. 복제본을 제거하지 않았지만 원본을 제거했습니다. 내가 원하는 것은 삭제 버튼이 클릭되었을 때, 제거 될 부모 - 부모 인 행입니다. 동적 요소를 처리하고 있기 때문에복제본에서 Jquery 제거가 작동하지 않습니다.

HTML

<tr class="expnedu-edu-record"> 
        <td> 
         <select name="expnedu-record-tingkat" class="expnedu-record-tingkat"> 
          <option>SD</option> 
          <option>SMP</option> 
          <option>SMA</option> 
          <option>SMK</option> 
          <option>D3</option> 
          <option>S1</option> 
          <option>S2</option> 
          <option>S3</option> 
          <option>Lainnya</option> 
         </select> 
        </td> 
        <td> 
         <select name="expnedu-record-tahun-min" class="expnedu-record-tahun-min"> 
          <?php 
          $i = date('Y'); 
          for($i;$i>=1900;$i--): ?> 
          <option><?php echo $i; ?></option> 
          <?php endfor; ?> 
         </select> - <select name="expnedu-record-tahun-max" class="expnedu-record-tahun-max"> 
          <?php 
          $i = date('Y'); 
          for($i;$i>=1900;$i--): ?> 
           <option><?php echo $i; ?></option> 
          <?php endfor; ?> 
         </select> 
        </td> 
        <td> 
         <input type="text" name="expnedu-record-instansi" class="expnedu-record-instansi" /> 
        </td> 
        <td> 
         <input type="text" name="expnedu-record-nilai" class="expnedu-record-nilai" /> 
        </td> 
        <td> 
         <input type="button" value="X" class="expnedu-record-delete"/> 
        </td> 
       </tr> 

JQuery와

var edu_record = $('.expnedu-edu-record').clone(); 
$('#expnedu-add-edu').click(function(){ 
       var new_record = edu_record.clone(false); 
       new_record.appendTo('.edu-edit-table'); 
      });  
    $('.expnedu-record-delete').on('click',function(){ 
        $(this).parent().parent().remove(); 
       }); 

솔루션을 제공하십시오, 당신에게

답변

2

감사합니다, 당신은 event delegation를 사용해야합니다. on()의 이벤트 위임 구문은 내가 didn를하기 때문에 내가 전에 이벤트 위임을 시도했지만 작동하지 않았다 .. 그래서

$('.edu-edit-table').on('click', '.expnedu-record-delete', function() { 
    $(this).closest('tr').remove(); 
}); 

또한

+0

놀라운 조상 TR 요소에 .closest()를 사용

$(static-ancestor-element).on(event, dynamic-element-selector, handler) 

입니다 동적 요소 선택기를 설정하지 마십시오. 이제 작동합니다. 고맙습니다 – godheaper

관련 문제