Удалить строку таблицы с помощью javascript / 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>

Javascript:

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

Если возможно, я бы хотел использовать решение со встроенным JavaScript

Answer 1

Прежде всего, встроенный JavaScript (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

Попробуйте это:

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

Кстати, он удалит JavaScript из вашего HTML-кода. С этим 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 3

удалить встроенные скрипты

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

Answer 4

Это не сработает, потому что $ (this) не ссылается на a-тег, как вы думаете (я думаю, что он ссылается на объект окна или что-то в этом роде)

Вместо использования встроенного JavaScript в атрибуте href сделайте это

Вместо этого сделайте это

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

Answer 5

Я бы согласился с тем, что следует избегать встроенного JavaScript, но если есть какая-то другая причина, по которой его необходимо или полезно использовать, вот как.

<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> 

Answer 6

Я полагаю, у вас есть ошибка в вашей функции deleteRow. Вот как это должно быть написано:

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

Ссылка, которую вы передаете в deleteRow, уже является объектом jQuery. Вы не должны использовать $ (ref), просто ref в одиночку, поскольку ref уже является объектом jQuery.