자바 스크립트/jquery로 표 행 삭제

Question

이것은 작동하지 않습니다. Firebug는 오류를 던지지 않습니다.

HTML :

<table> 
     <tr><td>BookA</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr> 
     <tr><td>BookB</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr> 
     <tr><td>BookC</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr> 
     <tr><td>BookD</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr> 
</table> 

자바 스크립트 :

function deleteRow(ref) { 
    $(ref).parent().parent().remove(); 
} 

가능하다면, 내가

Answer 1

먼저합니까, 인라인 자바 스크립트 (href="javascript:x" 또는 onclick="x") 일반적으로 좋지 않습니다. 인라인 JavaScript를 사용하면 이벤트 객체에 액세스 할 수 없으므로 this이 무엇을 참조하는지 실제로 알 수 없습니다.

jQuery (및 거의 모든 다른 JavaScript 라이브러리/프레임 워크)에는 이벤트 처리 기능이 내장되어 있습니다.

$('a.red').click(function(e) { 
    e.preventDefault(); // don't follow the link 
    $(this).closest('tr').remove(); // credits goes to MrKurt for use of closest() 
}); 

을 그리고 여기 데모입니다 : 그래서, 당신의 코드는 이벤트 핸들러와 같을 것이다 http://jsbin.com/okaxu

Answer 2

나는 당신이 당신의 deleteRow를 버그가 생각 자바 스크립트 인라인과 솔루션을 사용하고 싶습니다 기능. 다음과 같이 작성해야합니다 :

function deleteRow(ref) { 
    ref.parent().parent().remove(); 
} 

refRow에 전달하는 참조는 이미 jQuery 객체입니다. ref는 이미 jQuery 객체이므로 $ ref (ref)는 사용하지 말아야한다.

Answer 3

이 시도 : 그건 그렇고

// Bind all the td element a click event 
$('table td.deleteRow').click(function(){ 
    $(this).parent().remove(); 
}); 

를, 당신의 HTML 코드에서 자바 스크립트를 제거 할 수 있습니다. 는 A 태그를 참조하지 않습니다 $ (이) 때문에

(나는 그것의 창 객체 또는 뭔가를 참조 생각) 생각하는이 html 코드

<table> 
    <tr> 
     <td>BookA</td> 
     <td class="red deleteRow">Delete</td> 
    </tr> 
    <tr> 
     <td>BookB</td> 
     <td class="red deleteRow">Delete</td> 
    </tr> 
    <tr> 
     <td>BookC</td> 
     <td class="red deleteRow">Delete</td> 
    </tr> 
    <tr> 
     <td>BookD</td> 
     <td class="red deleteRow">Delete</td> 
    </tr> 
</table> 

Answer 4

이와 이 작동하지 않습니다 대신 HREF-속성에 인라인 자바 스크립트를 사용이

대신 모든이

<script type="text/javascript"> 
$("table a").click(function() { 
    $(this).parent().parent().remove(); 
}); 
</script> 

Answer 5

제거 인라인 스크립트

<script> 
    $(function(){ 
     $('table td a').live('click', function(){ 
      $(this).parents('tr').remove(); 
      return false; 
     }); 
    }); 
</script> 

Answer 6

나는 피해야한다 자바 스크립트가 인라인 동의 할 것 , 그러나 그것을 사용하는 것이 필요하거나 유익한 다른 이유가 있다면, 여기에 설명되어 있습니다.

<table> 
    <tr><td>BookA</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr> 
    <tr><td>BookB</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr> 
    <tr><td>BookC</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr> 
    <tr><td>BookD</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr> 
</table>