jQuery에서 다음 코드를 사용하여 테이블 행이 삭제되지 않는 이유는 무엇입니까?

Question

테이블의 HTML을 따라했습니다. 실제 테이블이 너무 큽니다. 다음과 같이 내가 쓴

<table id="blacklistgrid" class="table table-bordered table-hover table-striped"> 
    <thead> 
    <tr id="Row1"> 
     <th style="vertical-align:middle" >Pack Of</th> 
     <th style="vertical-align:middle">Quantity</th> 
     <th style="vertical-align:middle">Volume</th> 
     <th style="vertical-align:middle">Unit</th> 
     <th style="vertical-align:middle">Rebate Amount</th> 
    </tr> 
    </thead> 
    <tbody class="apnd-test"> 
    <tr id="reb1"> 
     <td><input type="text" name="pack[1]" id="pack_1" value="100" class="form-control" size="8"/></td> 
     <td><input type="text" name="quantity[1]" id="quantity_1" value="10" class="form-control" size="8"/></td> 
     <td><input type="text" name="volume[1]" id="volume_1" value="1000" class="form-control" size="8"/></td> 
     <td> 
     <div class="btn-group"> 
      <select id="units_1" name="units[1]" class="form-control"> 
      <option value="" >Select Unit</option> 
      <option value="5" >Microsecond</option> 
      <option value="7" >oz</option> 
      <option value="9" >ml</option> 
      <option value="10" >L</option> 
      <option value="12" selected="selected">gms</option> 
      </select> 
     </div> 
     </td> 
     <td><input type="text" name="amount[1]" id="amount_1" value="3.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td> 
    </tr> 
    <tr id="reb2"> 
     <td><input type="text" name="pack[2]" id="pack_2" value="200" class="form-control" size="8"/></td> 
     <td><input type="text" name="quantity[2]" id="quantity_2" value="20" class="form-control" size="8"/></td> 
     <td><input type="text" name="volume[2]" id="volume_2" value="2000" class="form-control" size="8"/></td> 
     <td> 
     <div class="btn-group"> 
      <select id="units_2" name="units[2]" class="form-control"> 
      <option value="" >Select Unit</option> 
      <option value="5" >Microsecond</option> 
      <option value="7" >oz</option> 
      <option value="9" >ml</option> 
      <option value="10" selected="selected">L</option> 
      <option value="12" >gms</option> 
      </select> 
     </div> 
     </td> 
     <td><input type="text" name="amount[2]" id="amount_2" value="6.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td> 
    </tr> 
    </tbody> 
</table> 

JQuery와 기능은 다음과 같습니다 :

function delete_rebate(field) { 
    $('#'+field).remove();  
} 

을하지만 그것은 작동하지 않습니다 참고로 나는이 큰 HTML 테이블에서 두 행을 표시했습니다. 아무도이 점에서 나를 도울 수 있습니까? 문제와 관련하여 더 자세한 정보가 필요하면 같은 것을 제공 할 수 있습니다.

Answer 1

함수 호출을 보면 도움이 될 것입니다.

나는이 ID에 공통적 인 문제가 있다고 생각합니다.

필드 값이 삭제 환불 내에 있는지 보려면 콘솔 로그를 수행하십시오.

이렇게 짧은 작업 하나만 수행하는 함수를 작성하면 속도가 느려지고 코드가 복잡해집니다.

그냥 깨끗하고 단순한 ELEMENT.remove();을 사용하십시오.

경우

Answer 2

당신이 함수 delete_rebate를 호출해야하고 있습니다 JQuery와 EQ 기능으로이입니다 작동하지 않는 모양()? 그렇다면 문서가 완전히로드되기 전에 함수를 호출하려고 할 수 있습니다. 나는 TR (ID = "reb2")와 함께이 시도하고 일 :

$(document).ready(function(){ 
     delete_rebate('reb2'); 
    }); 

    function delete_rebate(field) { 
     $('#'+field).remove();  
    } 

JSFiddle : 당신은 버튼 클릭에 함수를 호출 this.id를 사용하는 http://jsfiddle.net/cAS9v/3/

Answer 3

. 그러나이 문맥에서는 this이 버튼을 참조합니다. 대신 테이블 행을 찾아야합니다. 또한 HTML에 이벤트 핸들러를 하드 코딩하지 말고 할당하십시오.

$(".apnd-test button.close").click(function() { 
    $(this).closest("tr").remove(); 
});