jQuery delete current row previously added_问答_开发者

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>
    开发者_如何学Go <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>

Since you can have multiple Delete buttons, they should be identified by a classname, not an ID. (eg, <input type="button" class="DeleteButton" value="X"/>)

You can then write the following:

$('.DeleteButton').live('click', function() {
    $(this).closest('tr').remove();
});

EDIT: To prevent it the last row from being deleted, you can write

    $(this).closest('tr').not(':only-child').remove();

To populate the textboxes, you could write the following: (Note that these also need classnames instead of IDs)

var newRow = $('<tr>...</tr>');
newRow.find('.Title1').val(title1);
newRow.find('.Title2').val(title2);
newRow.appendTo($('#tblOtherParties > tbody'));

$("#btnDeleteOther").live("click", function(){
  $(this).closest("tr").remove();
});

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);
        };

For older jQuery you can do

$("#btnDeleteOther").click(function() {
    $(this).parents("tr").remove();
});

Also to change the textbox's id you can do the following when injecting

var content = $("<CONTENT>");
content.find("#title2").attr("id", "title" + something);
$('#tblOtherParties > tbody').append(content);

You should give the delete button either a unique id per row or a class rather than assigning it a fixed id. Element ids in HTML must be unique. I would suggest giving it a class, then applying the live class-based selector as @Jonathan suggests. As @Mark points out, the same applies to your textboxes. In my sample I've changed it to use names instead of ids, but perhaps they need to be unique as well. Adjust as needed to fit your situation.

$(function() {
   $('.deleteButton').live( 'click', function() {
       $(this).closest('tr').remove();
   });
});
function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td>' +
       + ' <input type="text" name="title1" value=""/>'
       + '</td><td>'
       + '<input type="text" name="title2"/>'
       + '</td><td>'
       + '<input type="button" class="deleteButton" value="X"/>'
       + '</td></tr>'); 
    }); 
}

It seems that you are appending an item with id="btnDeleteOther" . So, it seems that you could be have more than one item with the same id. You should give the appended one(s) a unique id [keep a count / append a timestamp / etc].

Attach a click event to the button and then call remove on the tr. using something like: $(this).closest('tr').hide();

Also, since you will be adding new items, then you probablly want to look into .live() so that new items will get the click event.