CODEWITHSUNDEEP
javascriptjquery
user982124
user982124

Reputation: 4610

Delete Table Row Except in First Row

I have a form which allows the user to add a new table row via a button in the bottom row which all is working well. I now need to also add the functionality to have an additional button to allow them to delete a table row.

I gather the simplest method would be to use:

$(this).closest('tr').remove();

but I'm having trouble integrating this into the existing functionality. I also only need the "delete" button to appear on all rows except the first row (i.e. users can delete all rows except the first one). I've setup a jsfiddle here that demonstrates my current functionality:

http://jsfiddle.net/fmdataweb/daayf/1/

So in my example when the user clicks the "Add another activity" button it should create the new table row as it currently does but also add the "delete" button which deletes that row. I've currently hard-coded the "delete" button to the first row as I'm now sure how to make it appear only for new rows created via the "add new activity" button.

Upvotes: 6

Views: 4251

Answers (12)

zia
zia

Reputation: 278

very simple way

function remove_point_item(th) {
        var tr = $(th).closest("tr");
        var _counter=0;
        $(tr.siblings('tr')).each(function(){
            _counter++;
        });
       if(_counter!=1){           
        tr.remove();
       }

}

Upvotes: 0

kyle.stearns
kyle.stearns

Reputation: 2346

I used the jsfiddle that you provided in hopes of being more direct in terms of answering your question. The method I took was to:

  1. Check if the add or delete button was pressed
  2. If the delete button was pressed, check if its the delete button contained within the first row (actually the third row, but it's the first row with user input). If the delete button is in the first row, do nothing
  3. If the delete button was not in the first row, create an 'add activity' button in the previous row and remove the clicked button's parent row.

Step 1: 

    // let's check whether they clicked the add or delete button
    if ( $(this).val() == 'Add another activity' ) { // if the add button was clicked

Step 2-3:

       if ( $(thisRow).index() == 2 ) { // if it's the first row, don't let them delete
            return false;
        } else { // if it is not the first row remove this row and create an 'add' button in first row
            $(thisRow).prev().find('td:last').prev().append('<input type="button" class="button mt5" value="Add another activity" id="button2" name="button2">');
            $(thisRow).remove();
        }

Here's a fiddle for ya: http://jsfiddle.net/daayf/22/

I placed a couple comments in the code to help out a bit. My edits were at:

  • Line 275-276
  • Line 300-307

Hope this helps out!

Upvotes: 3

ManojRK
ManojRK

Reputation: 962

You have got it right for the most part except for the small oversight here and there. I have fixed your code for you and you can find it here: http://jsfiddle.net/ManojRK/86Nec/ .

Please try to understand the changes by comparing your version and my version using a Code Diff Tool (like http://www.quickdiff.com). It will teach you a lot.

Changes Made:

  1. I have used styles to show and hide your buttons. This is not the only way to do it. But since you are cloning rows to add, using styles will make your JavaScript simple. This is a lot less buggy and less susceptible to changes.
  2. I have introduced css classes to differentiate Add Another Activity and Delete buttons for the click event.

Hope it helps you understand.

Upvotes: 3

pranav paruchuri
pranav paruchuri

Reputation: 65

Since you want to use the first row as template for all other row but do not want to have a delete on the all the other rows we should insert the delete only during first insertion in java script.Check this demo out i modified your fiddle for this to work.

if(cloned.find('input.mt5[value="Delete"]').length==0){
   cloned.find('.mt5').each(function(){
       cloned.append($('<td><input type="button" class="button mt5" value="Delete" id="deleteRow'+newIDSuffix+'" name="deleteRowButton" /></td>'));
   })
}

now for handling the delete events

$('#lastYear').delegate('input.button[value="Delete"]', 'click', function () {
    var thisrow=$(this).parent().parent();
    var button=thisrow.find("input.button[value='Add another activity']");
    if(button.length>0){
        var buttoncell=button.parent().detach();
        var prevrow=thisrow.prev();
        var prevDelete=prevrow.find('input.button[value="Delete"]');
        var previd=(prevDelete.length>0)?prevDelete[0].id:'deleteRow1';
        buttoncell.children()[0].id=previd.replace('deleteRow','button');
        prevrow.find('input:text:last').parent().after(buttoncell);
    }
    thisrow.remove();
 });

Demo: http://jsfiddle.net/vwdXD/2/

Upvotes: 3

Shailesh Rathod
Shailesh Rathod

Reputation: 106

Check out this one!

if($("table tr").length > 1) {
$(this).parent().parent("tr").remove(); }

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388316

Few changes

In the starting markup, add the classes addbtn and delbtn also hide the delete button

<td>
    <input type="button" class="button mt5 addbtn" value="Add another activity" id="button1" name="button2" />
</td>
<td>
    <input type="button" class="button mt5 delbtn" value="Delete" id="deleteRowButton" name="deleteRowButton" style="display: none"/>
</td>

Then

$('#lastYear').on('click', '.delbtn', function () {
    $(this).closest('tr').remove()
});

var newIDSuffix = 2;
$('#lastYear').on('click', '.addbtn', function () {
    var thisRow = $(this).closest('tr')[0];
    $(thisRow).find('.delbtn').show();

    var cloned = $(thisRow).clone();
    cloned.find('input, select').each(function () {
        var id = $(this).attr('id');
        id = id.substring(0, id.length - 1) + newIDSuffix;
        $(this).attr('id', id);
    });

    cloned.insertAfter(thisRow).find('input:text').val('');
    cloned.find('.delbtn').hide();
    cloned.find("[id^=lastYearSelect]")
    .autocomplete({
        source: availableTags,
        select: function (e, ui) {

            $(e.target).val(ui.item.value);
            setDropDown.call($(e.target));
        }
    }).change(setDropDown);

    $(this).remove();
    newIDSuffix++;
});

Demo: Fiddle

Upvotes: 4

Edper
Edper

Reputation: 9322

First of all I renamed your Button1 for your Adding a Row to addRowButton and then I change the delegate method to be more specific to addRowButton that is from

$('#lastYear').delegate('input[type="button"]'

To like this:

$('#lastYear')delegate('input[type="button"][id^="addRow"]'

Then inside the delegate method specifically after

 $(this).attr('id', id);

I add after that the one below:

 var checkid = $(this).attr('id').substring(0,id.length-1);

 if (checkid == 'deleteRowButto') // the 'deleteRowButto' is not a mistake
     {
         $(this).click(function() {
             $(this).closest("tr").remove(); // I assign an onclick for the delete button in order to remove a specific row
          });
      }

Edit:

I made some improvements that once the row is deleted the previous add button is shown so I add the code below:

 var showmenow =  $(this).closest("tr").prev().find("td:eq(5)").find("input[type='button']");               
 $(showmenow).show();
             $(this).closest("tr").remove(); 
             });

And instead of removing the button in your original code:

$(this).remove();
newIDSuffix++;

I use hide instead:

$(this).hide();
newIDSuffix++;

See the new jsfiddle that I created.

Upvotes: 3

Sagar Hirapara
Sagar Hirapara

Reputation: 1697

Try this

On your Delete Button

$('#lastYear').on('click', '#deleteRowButton', function(e){
   $(this).closest('tr').remove()
})

Upvotes: 3

farnoush resa
farnoush resa

Reputation: 403

You can set a specific class for the buttons like this

<input type="button" class="button mt5 deleteButton" value="Delete" id="deleteRowButton" name="deleteRowButton" />

and add this code to jquery

$('.deleteButton').on('click',function(){
    $(this).parent().parent().remove();
});

this jquery deletes the grandparent of the input with deleteButton Class(the delete button), which is the row it is located in.

Upvotes: 2

yvonnezoe
yvonnezoe

Reputation: 7407

Why is your "add new activity" and "delete" having the same class "button mt5"? not sure if space is allowed for the name of a class.

You may want to refer to my table here http://jsfiddle.net/yvonnezoe/nbrSR/1/ :D I have a fixed row on top and dynamic rows following that can be deleted.

My new row is created as below:

var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' + textInput + '</td>' + '<td id="status_'+rowID+'"></td>' + '<td><input type="checkbox" name="CB" id="monitor_' + rowID + '" class="custom" data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' + '</tr>';
$('#status_table tr:last').after(str);

The remove buttons are having a same class. So the rows can deleted when clicked.

$('#status_table').on('click', '.outputRemove', function () {
$(this).closest('tr').remove();
$('#status_table tbody tr').find('td:first').text(function (index) {
    return ++index;
});

});

Hope it inspires you somehow :)

Upvotes: 0

jykim
jykim

Reputation: 1

how about do this?

$(this).find('tr').length > 0 ? $(this).closest('tr').remove() : ;

Upvotes: 0

Cezary Wojcik
Cezary Wojcik

Reputation: 21845

I recommend adding an id attribute dynamically for each row that way you can just refer to that id with jQuery.

Upvotes: 2

Related Questions