ansaurus

Question

jquery delete current row previously added.

Answer 1

+2 A:

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

Jonathan Sampson 2010-03-05 15:05:22

@Jonathan: Thanks! That its perfect, just one last thing, could you tell me how to stop this function from deleting when there is only one row left?

Cesar Lopez 2010-03-05 15:10:21

Check `$(this).closest("tr").siblings().length` to see how many other table rows exist.

Jonathan Sampson 2010-03-05 15:22:23

Sorry I tried $(this).closest("tr").siblings().length, but I dont think I am using it right as it does not do anything. Thanks anyway.

Cesar Lopez 2010-03-05 15:27:09

Assumption is you fixed the #btnDeleteOther to be a class so $('.btnDeleteOther').length should give you a count of rows with a delete button. See my answer for an example of use.

Mark Schultheiss 2010-03-05 15:34:45

@Cesar, you would need to put that within the click-logic, as part of an if-statement.

Jonathan Sampson 2010-03-05 16:16:58

Answer 2

+3 A:

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

SLaks 2010-03-05 15:07:20

@Slaks: thank you very much for the advise, I did not about the delete button id. :-)

Cesar Lopez 2010-03-05 15:11:23

$(this).closest('tr:not(:only-child)').remove(); Will remove the whole table. :-(. Thanks anyway.

Cesar Lopez 2010-03-05 15:25:45

@Cesar#2: Fixed; thanks.

SLaks 2010-03-05 15:35:01

Answer 3

A:

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.

easement 2010-03-05 15:07:46

Answer 4

+1 A:

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

tvanfosson 2010-03-05 15:10:28

Not going to work with the id="title1" and id="title2" stuff in there.

Mark Schultheiss 2010-03-05 15:13:48

@Mark - I guess I was too focused on the delete button, but yes the inputs need to be unique (or use names instead) as well. Will update.

tvanfosson 2010-03-05 15:16:14

Answer 5

+1 A:

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

Dmitriy Likhten 2010-03-05 15:10:49

Answer 6

+1 A:

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

Mark Schultheiss 2010-03-05 15:23:59

@Mark Schutheiss: Thanks for all the effort you are putting on helpping me out. I think your advise it really good, but for some reason I get a Unterminated string constant error when using your code.PS:I did fix the issue with delete button, its now a class. Thanks. :-)

Cesar Lopez 2010-03-05 15:41:00

yes, the 'btnAddOther' needs to be '#btnAddOther' editing;

Mark Schultheiss 2010-03-05 15:46:20

NOTE: this is not "perfect" but I tried to keep it as close to yours as possible yet solve the issues.

Mark Schultheiss 2010-03-05 15:48:51

Thank you, I am working on it. :-)

Cesar Lopez 2010-03-05 15:52:11

ansaurus

tags:

views:

answers:

jquery delete current row previously added.

related questions