동적으로 생성 된 행을 선택하여 삭제합니다.

Question

안녕하세요 다음 표에는 데이터 행이 있습니다. 각 행 옆에 삭제 버튼이 있습니다.

  <form> 
      <table id="tblAppendGrid" class="appendGrid"> 
       <thead class="ui-widget-header"> 
       <tbody class="ui-widget-content"> 
       <tr id="tblAppendGrid_Row_1"> 
       <td><input type="text" id="tblAppendGrid_s_1" name="nameCompany" maxlength="100" style="width: 160px;"></td> 
       <td><button id="tblAppendGrid_Delete_1" class="delete ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" value="2" type="text" title="Remove Current Row" tabindex="-1" role="button" aria-disabled="false"></td> 
       <tr id="tblAppendGrid_Row_2"> 
       <td><input type="text" id="tblAppendGrid_s_2" name="nameCompany" maxlength="100" style="width: 160px;"></td> 
       <td><button id="tblAppendGrid_Delete_2" class="delete ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" value="2" type="text" title="Remove Current Row" tabindex="-1" role="button" aria-disabled="false"></td> 
      </tbody> 
      <tfoot class="ui-widget-header"> 
      </table> 
     </form> 

삭제 버튼을 클릭하면 행을 읽으려고합니다. 아래의 코드 에서처럼 버튼 ID 옆에 행 번호를 선택하는 방법을 알지 못합니다. 그 때문에 그것은 작동하지 않습니다.

 $(document).ready(function() { 

      $("#tblAppendGrid_Delete_").button().click(function() { 

         testing("in delete"); 
        });  
     }); 

나는 $ ("tblAppenDGrid_Delete_2")와 같은 선택기가 필요하다고 생각합니다. ... 버튼을 클릭 할 때이 행을 선택하여 제거 할 수있는 방법을 알려주세요. 감사

Answer 1

여기에 두 가지 문제가 있습니다

요소의 ID, 당신은 당신이 그룹에 대신 ID 속성을 모두 삭제 버튼을 클래스 값을 사용할 수 있습니다이 경우, ID tblAppendGrid_Delete_ 여러 요소가 고유해야합니다 .

<button class="tblAppendGrid_Delete_1 delete ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" value="2" type="text" title="Remove Current Row" tabindex="-1" role="button" aria-disabled="false"> 

는 동적 요소를 처리 할 수 ​​있기 때문에 당신은 이벤트 위임을 기반으로 이벤트 핸들러를 사용할 필요가

$(document).on('click', ".tblAppendGrid_Delete_", function() { 
    testing("in delete"); 
});