FSR060523 :- Javascript Question | Deleting Nodes With Remove Function

Q.s 1 :- Delete row with remove function HTML is given :point_down:


    <table border="1">
        <tbody>
            <tr id="row1">
                <td>1</td>
                <td>John</td>
                <td>john@gmail.com</td>
                <td>
                    <button onclick="remove_row();" >Del</button>
                </td>
            </tr>

            <tr id="row2">
                <td>2</td>
                <td>tom</td>
                <td>tom@gmail.com</td>
                <td>
                    <button onclick="remove_row();" >Del</button>
                </td>
            </tr>


            <tr id="row3">
                <td>3</td>
                <td>alex</td>
                <td>alex@gmail.com</td>
                <td>
                    <button onclick="remove_row();">Del</button>
                </td>
            </tr>
            
           
        </tbody>
    </table>
2 Likes
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function check(a) {
        //     let print;
        //     var k = a.toUpperCase();
        //     switch (k) {
        //         case 'A':
        //         case 'E':
        //         case 'I':
        //         case 'O':
        //         case 'U':
        //             print = k + ' is a vowel.';
        //             break;
        //         default:
        //             print = k + ' is a consonant.';
        //     }
        //     return print;
        // }
        // function print() {
        //     var a = prompt('Enter Number: ');
        //     var z = check(a);
        //     document.write(z);

        // }
        // print();

        function remove_row(y){
            document.getElementById(y).remove();
        }

    </script>

    <table border="1">
        <tbody>
            <tr id="row1">
                <td>1</td>
                <td>John</td>
                <td>john@gmail.com</td>
                <td>
                    <button onclick="remove_row('row1')">Del</button>
                </td>
            </tr>

            <tr id="row2">
                <td>2</td>
                <td>tom</td>
                <td>tom@gmail.com</td>
                <td>
                    <button onclick="remove_row('row2')">Del</button>
                </td>
            </tr>


            <tr id="row3">
                <td>3</td>
                <td>alex</td>
                <td>alex@gmail.com</td>
                <td>
                    <button onclick="remove_row('row3')">Del</button>
                </td>
            </tr>


        </tbody>
    </table>



    Reply

</body>

</html>

2 Likes

https://codepen.io/Akshitha-Annaram/live/OJamLRG

2 Likes
        <tr id="row2">
            <td>2</td>
            <td>tom</td>
            <td>tom@gmail.com</td>
            <td>
                <button onclick="remove_row('row2');" >Del</button>
            </td>
        </tr>


        <tr id="row3">
            <td>3</td>
            <td>alex</td>
            <td>alex@gmail.com</td>
            <td>
                <button onclick="remove_row('row3');">Del</button>
            </td>
        </tr>
        
       
    </tbody>

function remove_row(x){
document.getElementById(x).remove();
console.log(x);
}

1 John john@gmail.com Del
2 Likes
        <tr id="row2">
            <td>2</td>
            <td>tom</td>
            <td>tom@gmail.com</td>
            <td>
                <button onclick="remove_row('row2');" >Del</button>
            </td>
        </tr>


        <tr id="row3">
            <td>3</td>
            <td>alex</td>
            <td>alex@gmail.com</td>
            <td>
                <button onclick="remove_row('row3');">Del</button>
            </td>
        </tr>
        
       
    </tbody>
</table>

function remove_row(y){
document.getElementById(y).remove();

}

1 John john@gmail.com Del
2 Likes
HTML 
<table border="1">
            <tbody>
                <tr id="row1">
                    <td>1</td>
                    <td>John</td>
                    <td>john@gmail.com</td>
                    <td>
                        <button onclick="remove_row('row1');" >Del</button>
                    </td>
                </tr>
    
                <tr id="row2">
                    <td>2</td>
                    <td>tom</td>
                    <td>tom@gmail.com</td>
                    <td>
                        <button onclick="remove_row('row2');" >Del</button>
                    </td>
                </tr>

                <tr id="row3">
                    <td>3</td>
                    <td>alex</td>
                    <td>alex@gmail.com</td>
                    <td>
                        <button onclick="remove_row('row3');">Del</button>
                    </td>
                </tr>    

            </tbody>
        </table>
JS 
function remove_row(y) {
  document.getElementById(y).remove(y);
}

2 Likes
<script>
   function remove_row(rowId) {
     var row = document.getElementById(rowId);
     row.parentNode.removeChild(row);
   }
 </script>
2 Likes
<table border="1">
    <tbody>
        <tr id="row1">
            <td>1</td>
            <td>John</td>
            <td>john@gmail.com</td>
            <td>
                <button onclick="remove_row();" >Del</button>
            </td>
        </tr>

        <tr id="row2">
            <td>2</td>
            <td>tom</td>
            <td>tom@gmail.com</td>
            <td>
                <button onclick="remove_row();" >Del</button>
            </td>
        </tr>


        <tr id="row3">
            <td>3</td>
            <td>alex</td>
            <td>alex@gmail.com</td>
            <td>
                <button onclick="remove_row();">Del</button>
            </td>
        </tr>
        
       
    </tbody>
</table>

function remove_row(a){
console.log(a)
console.log(document.getElementById(a));
document.getElementById(a).remove();
}

2 Likes
<!DOCTYPE html>
<html>
<head>
  <title> "Remove Table Row Dynamically with JavaScript"</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      padding: 8px;
      border: 1px solid black;
    }
    .delete-button {
      background-color: red;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Serial No</th>
        <th>Name</th>
        <th>Mail ID</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td><button class="delete-button" onclick="removeRow(this)">Delete</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td><button class="delete-button" onclick="removeRow(this)">Delete</button></td>
      </tr>
      <tr>
        <td>3</td>
        <td>Mike Johnson</td>
        <td>mikejohnson@example.com</td>
        <td><button class="delete-button" onclick="removeRow(this)">Delete</button></td>
      </tr>
    </tbody>
  </table>

  <script>
    function removeRow(button) {
      // Access the parent row and remove it
      var row = button.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  </script>
</body>
</html>

2 Likes

Html

          <tr id="row2">
              <td>2</td>
              <td>tom</td>
              <td>tom@gmail.com</td>
              <td>
                  <button onclick="remove_row('row2');" >Del</button>
              </td>
          </tr>
          <tr id="row3">
                <td>3</td>
                <td>alex</td>
                <td>alex@gmail.com</td>
                <td>
                    <button onclick="remove_row('row3');">Del</button>
                </td>
            </tr>

Js
function remove_row(x){
console.log(x)
console.log(document.getElementById(x));
document.getElementById(x).remove()
}

1 John john@gmail.com Del
2 Likes
        <tr id="row2">
            <td>2</td>
            <td>tom</td>
            <td>tom@gmail.com</td>
            <td>
                <button onclick="remove_row('row2');" >Del</button>
            </td>
        </tr>


        <tr id="row3">
            <td>3</td>
            <td>alex</td>
            <td>alex@gmail.com</td>
            <td>
                <button onclick="remove_row('row3');">Del</button>
            </td>
        </tr>
        
       
    </tbody>
</table>

<script>
    

    function remove_row(y){
        document.getElementById(y).remove();
    }

</script>
1 John john@gmail.com Del
2 Likes
 <table border="1">
        <tbody>
            <tr id="row1">
                <td>1</td>
                <td>lalsingh</td>
                <td>lalsingh@gmail.com</td>
                <td>
                    <button onclick="remove_row();" >Del</button>
                </td>
            </tr>

            <tr id="row2">
                <td>2</td>
                <td>giraj</td>
                <td>giraj@gmail.com</td>
                <td>
                    <button onclick="remove_row();" >Del</button>
                </td>
            </tr>


            <tr id="row3">
                <td>3</td>
                <td>manu</td>
                <td>manu@gmail.com</td>
                <td>
                    <button onclick="remove_row();">Del</button>
                </td>
            </tr>
            
           
        </tbody>
    </table>

function remove_row(x){
document.getElimentById(x).remove();
console.log(x)
}

2 Likes
function remove_row(y){
// console.log(y)
document.getElementById(y).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
<table border="1">
        <tbody>
            <tr id="row1">
                <td>1</td>
                <td>John</td>
                <td>john@gmail.com</td>
                <td>
                    <button onclick="remove_row('row1');" >Del</button>
                </td>
            </tr>

            <tr id="row2">
                <td>2</td>
                <td>tom</td>
                <td>tom@gmail.com</td>
                <td>
                    <button onclick="remove_row('row2');" >Del</button>
                </td>
            </tr>


            <tr id="row3">
                <td>3</td>
                <td>alex</td>
                <td>alex@gmail.com</td>
                <td>
                    <button onclick="remove_row('row3');">Del</button>
                </td>
            </tr>
            
           
        </tbody>
    </table>

    <script>
function remove_row(x){
    document.getElementById(x).remove();
}
</script>
</body>
</html>