Удалить <tr> с помощью JQuery

Question

<table class="table table-bordered table-hover tablesorter">  
    <tbody id="fieldList">  
     <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82"> 
      <td>Description</td> 
      <td>Test Description</td> 
      <td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a> 
      </td> 
     </tr> 
     <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f"> 
      <td>Address</td> 
      <td>Test Address</td> 
      <td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td> 
     </tr> 
    </tbody> 
</table> 

код Javascript:

var service = { 
removeRow:function(id){ 
     /* alert(id) == [object HTMLTableRowElement]*/ 
     $("#"+id).remove(); 
    } 
} 

Console Ошибка:

Error: Syntax error, unrecognized expression: #[object HTMLTableRowElement]

Я хочу удалить строку таблицы, пожалуйста, помогите.

Answer 1

Вы можете упростить свой код, указав родительский tr, а не напрямую, но начиная с дочернего td с помощью jQuery closest.

HTML:

<td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a> 

    </td> 

Код:

var service = { 
removeRow:function(el){ 
     $(el).closest('tr').remove(); 
    } 
} 

Таким образом, вы можете избежать жестко закодировать его идентификатор.

Демо: http://jsfiddle.net/IrvinDominin/keLnN/

Answer 2

идентификаторы не строки.

Следовательно, ужасный IE4ism, который каким-то образом превратил его в HTML, который заставляет каждый элемент с идентификатором создавать глобальную переменную JS с тем же идентификатором, дает вам сами элементы <tr>.

Когда вы "#"+id вам преобразовать объект HTML элемента в строку, которая [object HTMLTableRowElement]

в кавычках идентификаторов вы проходящие.

service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82') 

Answer 3

Вы должны процитировать идентификаторы, когда у вас есть их в HTML так:

<table class="table table-bordered table-hover tablesorter">  
    <tbody id="fieldList">  
     <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82"> 
      <td>Description</td> 
      <td>Test Description</td> 
      <td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a> 
      </td> 
     </tr> 
     <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f"> 
      <td>Address</td> 
      <td>Test Address</td> 
      <td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td> 
     </tr> 
    </tbody> 
</table> 

или еще лучше, не встраивать обработчики событий и сделать все это в JS:

$('#fieldList a').on('click', function (e) { 
    $(this).closest('tr').remove(); 
}); 

, который имеет побочный эффект аккуратной HTML:

<table class="table table-bordered table-hover tablesorter">  
    <tbody id="fieldList">  
     <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82"> 
      <td>Description</td> 
      <td>Test Description</td> 
      <td><a href="#"> <i class="fa fa-delete"></i></a> 
      </td> 
     </tr> 
     <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f"> 
      <td>Address</td> 
      <td>Test Address</td> 
      <td><a href="#"> <i class="fa fa-delete"></i></a></td> 
     </tr> 
    </tbody> 
</table> 

Answer 4

Если вы хотите удалить строку, где находится кнопка, лучший способ заключается в использовании «это», а не жёстко идентификаторы Row, потому что, если ID отличается - вам нужно изменить функция.

Установить все а-теги быть:

<a onclick="service.removeRow(this);" href="javascript:void(0);"> 

тогда функция будет:

var service = { 
removeRow:function(td){ 
     $(td).closest("tr").remove(); 
    } 
} 

Answer 5

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

$('"#'+id+'"').remove();

Answer 6

изменить знак вверх, как это...

onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f'); 

надеюсь, что решает!

Answer 7

Create <a> tags like below 

    <a class="removeRow" href="javascript:void(0);"> 

then in Jquery 

$(document).ready(function(){ 
$('.removeRow').click(function(){ 
$(this).closest('tr').remove(); 
}); 
}); 

Answer 8

Вы должны удалить ребенка из родительского узла, так вот небольшой пример

<!DOCTYPE html> 
<html> 
<body> 

<table id="table1" border="2"> 
<tr id="tr1" > 
<td id="td1"><p id="p1">This is a paragraph.</p></td> 
<td id="td1"><p id="p2">This is another paragraph.</p></td> 
</tr> 
</table> 

<script> 
var parent=document.getElementById("table1"); 
var child = document.getElementById("tr1"); 

child.parentNode.removeChild(child); 
</script> 

</body> 
</html> 

На самом деле здесь у меня есть таблица с идентификатором table1, как вы можете видеть ... в скрипт я определил переменную с именем child ... теперь в последней строке child.parentNode.removeChild(child);child - это имя переменной, которую мы определяем ранее ... после этого parentNode будет искать свой родительский узел дочернего элемента, который является таблицей, а затем removeCHILD удалит child ...

надеюсь, что вы поняли! спасибо