Удаление определенной строки в таблице

Question

Я пытаюсь удалить определенную строку из таблицы с помощью javascript. То, как я пытаюсь сделать это сейчас, - это получить идентификатор текущей строки, нажав кнопку (кнопка удаления), а затем удалив строку. Проблема в том, что я не получаю текущий идентификатор строки в таблице. Если кто-то может помочь мне получить идентификатор текущей строки, когда пользователь нажимает кнопку «Удалить», я думаю, что могу сам решить остальные проблемы. Благодаря

/*The Javascript*/ 
function delete_row() {  
     alert('id goes here'); 
     //getElementById('row').innerHTML ='hello'; 
     //id.deleteRow(); 
     //var table = document.getElementByTagName('items_table'); 
     //var row = table.rows[index]; 
       //document.getElementByTagName('items_table').deleteRow(0); 
} 

---

/*The HTML of the Table*/ 
<table id="items_table"> 
    <tr id="row_1"> 
     <td> 
      <input type="text" value="item1"/> 
     </td> 
     <td> 
      <button onclick="delete_row();">X</button> 
     </td> 
    </tr> 
/* Five rows in this table... */ 
    <tr id="row_5"> 
     <td> 
      <input type="text" value="item5"/> 
     </td> 
     <td> 
      <button onclick="delete_row();">X</button> 
     </td> 
    </tr> 
</table> 

Answer 1

Вы можете просто подняться на дерево, пока не найдете строку:

function delete_row(btn) { 
    var tr = btn; 
    while(tr && tr.nodeName != "TR") tr = tr.parentNode; 
    if(!tr) throw new Error("Failed to find the row, was the function called correctly?"); 
    tr.parentNode.removeChild(tr); // delete it 
} 

И:

<button onClick="delete_row(this);">X</button> 

this имеет важное значение, так как она обеспечивает ссылку на кнопку, которая была нажата, поэтому мы можем найти строку, в которой она находится.

Answer 2

Не можете ли вы просто сменить <button onclick="delete_row();">X</button> на <button onclick="delete_row('row_5');">X</button> в каждой строке соответственно?

Ваш обработчик будет выглядеть следующим образом:

function delete_row(theID) {  
     alert(theID); 
} 

Answer 3

Проверьте этот код. Он был проверен и прекрасно выполнит вашу работу. :)

<script> 

function delete_row(me) {  
alert(me.parentNode.parentNode.id); 
} 
</script> 

<table id="items_table"> 
    <tr id="row_1"> 
     <td> 
      <input type="text" value="item1"/> 
     </td> 
     <td> 
      <button onclick="delete_row(this);">X</button> 
     </td> 
    </tr> 

    <tr id="row_5"> 
     <td> 
      <input type="text" value="item5"/> 
     </td> 
     <td> 
      <button onclick="delete_row(this);">X</button> 
     </td> 
    </tr> 
</table>