Home/ Questions/Q 654007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T22:26:46+00:00

How can I delete a row from a table which it has been created

  • 0

How can I delete a row from a table which it has been created with a delete button before?

I need to add an event to btnDeleteOther to delete the current row selected.
I would also need to know how to change id for each textbox created, and populate the value of the textbox with the variable coming to the function(but I guess I would have to ask that in other question).

Code example:

<html>
<head>
<script type="text/javascript">
   function createNewRow (text1,text2){
    $(document).ready(function(){
    $('#tblOtherParties > tbody').append('<tr><td>
    <input type="text" id="title1" value=""/>
           </td><td>
       <input type="text" id="title2"/>
       </td><td>
       <input type="button" id="btnDeleteOther" value="X"/>
       </td></tr>');
    });
     }
</script>
</head>
<body>
<table style="float:left" id="tblOtherParties">
  <thead>
     <tr>
     <th>Title1</th>
     <th>Title2</th>
     <th>
      <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>
     </th>
    </tr>
       </thead>
      <tbody>
         <tr>
           <td>
        <input type="text" id="title1"/>
           </td>
           <td>
        <input type="text" id="title2"/>
           </td>
           <td>
        <input type="button" id="btnDeleteOther" value="X"/>
           </td>
         </tr>
      </tbody>
    </table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have issues beyond just getting your row deleted.

    This:

       function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" id="title1" value=""/> 
           </td><td> 
       <input type="text" id="title2"/> 
       </td><td> 
       <input type="button" id="btnDeleteOther" value="X"/> 
       </td></tr>'); 
    }); 
     }

    would be better written as:

    function createNewRow (text1,text2){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" class="title1" value=""/> 
           </td><td> 
       <input type="text" class="title2"/> 
       </td><td> 
       <input type="button" class="btnDeleteOther" value="X"/> 
       </td></tr>'); 
     };

    and as for the

      <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>

    clean that up with

      <input type="button" id="btnAddOther" title="Add" value="Add" >

    Then use the jQuery to act the behavior you wish

    $(document).ready(function(){
    $('.btnDeleteOther').live('click', function() {  
        if ($('.btnDeleteOther').length > 1)
        {
           $(this).closest('tr').remove();               
        }; //added this based on comments to other answer- always leaves one row in
    }); 
    $('#btnAddOther').click(function()
    { 
       createNewRow();
    });
});

    EDIT: HUGE assumption on my part is you might want to pass text to the inputs when you add a row as you have the (text1,text2) in there…

    To do that, you need a source of those, then you can do that with this:

    var mytext1 = "default stuff for 1";
var mytext2 = "default stuff for 2";

function createNewRow (){ 
        $('#tblOtherParties > tbody').append('<tr><td> 
        <input type="text" class="title1" value=""/> 
               </td><td> 
           <input type="text" class="title2"/> 
           </td><td> 
           <input type="button" class="btnDeleteOther" value="X"/> 
           </td></tr>'); 
           $('tr:last').find('.title1').val(mytext1);
           $('tr:last').find('.title2').val(mytext2);
        };
    • 0