如何使用輸入數據的下一個單元格中的按鈕從HTML表中刪除一行？

Question

這是我正在研究的代碼。基本上是我大學最後一學期的圖書館管理項目。

現在我的問題是如何刪除一行，當我們點擊該行的刪除按鈕。

 <table border="1" id="student_tb1" class="table table-bordered" style="display: none;" contenteditable="true"> 
      <tr> 
       <td>Sr. No.</td> 
       <td>Class</td> 
       <td>Roll no</td> 
       <td>Name</td> 

      </tr> 
     </table> 

     <script type="text/javascript"> 
      function addStudent(){ 
    var maxRows = 10; 
    var table = document.getElementById("student_tb1"); 
    var text1 = document.getElementById("student_textbox1").value; 
    var text2 = document.getElementById("student_textbox2").value; 
    var text3 = document.getElementById("student_textbox3").value; 
    var x = document.getElementById("book_tb1").rows.length; 
    var message; 
    message = document.getElementById("message"); 
    message.innerHTML = ""; 
     if(x <= maxRows) { 

     if(text1 == "select"){ 
      message.innerHTML = "select the class !! " 

     } 
     else if(text2 == "" || isNaN(text2) || text2 < 0 || text2 > 100 || text2 == 0){ 
      message.innerHTML = "your roll no may be between 0 and 101 " 
     } 
     else if (text3 == "") { 
      message.innerHTML = "enter the name" 
     } 

     else{ 

     var row = table.insertRow(); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     var cell3 = row.insertCell(2); 
     var cell4 = row.insertCell(3); 

     cell2.innerHTML = text1; 
     cell3.innerHTML = text2; 
     cell4.innerHTML = text3; 

       for (var i = 0; i < x; i++) { 

        cell1.innerHTML = i+1; 
       } 

      } 
      alert("Data has been inserted successfully!"); 
     }| 
    } 
    </script> 

結果：

Sr. No. |Class |Roll no |Name  |Action 
1  |BSCIT-3 |010  |vishesh |Delete button 

Answer 1

你可以調用這個函數：

function deleteRow(btn) { 
    var row = btn.parentNode.parentNode; 
    row.parentNode.removeChild(row); 
} 

，使您的刪除按鈕的html：

<input type="button" value="Delete" onclick="deleteRow(this)"/>