CODEWITHSUNDEEP
javascriptjquery
Raihan
Raihan

Reputation: 4001

Delete Table row from the 2nd last

I have a table initially with two rows.Every cells of first row titled with word FIRST and every cell of last row titled with word LAST. JS FIDDLE

I also have two button one button for adding rows and another for deleting rows.

-On clicking Add Row it adds a Row in the 2nd last position upto total 5 rows and become disable.

-But I couldn't figure out how to remove rows one by one from 2nd last upto it's original position on clicking Delete Row button.Basically Delete Row button will do opposite of Add row. Initially Disabled but when there is new row added it will be enabled.

How I can do this ? Thanks in advance.

JS 

// Add and remove row
var counter = 0;
$(".add-xy-scale-row").on("click", function () {

    counter = $('.xy-table tr').length - 1;

    var newRow = $("<tr>");
    var cols = "<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>";

    newRow.append(cols);
    if (counter == 3) $('.add-xy-scale-row').attr('disabled', true).prop('value', "You've reached the limit");
    $(".xy-table .last-row").before(newRow);
    $(".tooltip").hide();
    counter++;

    //Maintain vertical label height
    if ($('.xy-table').height() < 300) {
        $(".scale-label-input-group").addClass("small");
    } else if ($('.xy-table').height() > 300) {
        $(".scale-label-input-group").removeClass("small");
    }

});

$(".dlt-xy-scale-row").on("click", function () {
    $(".xy-table")
});

Upvotes: 2

Views: 1246

Answers (6)

Tim McClure
Tim McClure

Reputation: 1192

Here's a working jsfiddle

You can use jQuery's .prev() method to select the previous sibling in the DOM. In this case, you target the last row, .last-row, then select the previous sibling and remove it with .remove(). I also added in disabling and enabling the Delete button when counter is > 0.

Edit

Here is the updated JS:

// Add and remove row
var counter = $('.xy-table tr').length - 1;
$(".add-xy-scale-row").on("click", function () {
    var newRow = $("<tr>");
    var cols = "<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>";

    newRow.append(cols);
    if (counter == 3) $('.add-xy-scale-row').attr('disabled', true).prop('value', "You've reached the limit");
    $(".xy-table .last-row").before(newRow);
    $(".tooltip").hide();

    //Maintain vertical label height
    if ($('.xy-table').height() < 300) {
        $(".scale-label-input-group").addClass("small");
    } else if ($('.xy-table').height() > 300) {
        $(".scale-label-input-group").removeClass("small");
    }

    counter = $('.xy-table tr').length - 1;

    if (counter > 1) {
        $('.dlt-xy-scale-row').attr('disabled', false);
    }
    else {
        $('.dlt-xy-scale-row').attr('disabled', true);
    }

});

$(".dlt-xy-scale-row").on("click", function () {

    $(".xy-table .last-row").prev().remove();
    counter = $('.xy-table tr').length - 1;

    if (counter > 1) {
        $('.dlt-xy-scale-row').attr('disabled', false);
    }
    else {
        $('.dlt-xy-scale-row').attr('disabled', true);
    }

    if (counter == 4) {
        $('.add-xy-scale-row').attr('disabled', true).prop('value', "You've reached the limit");
    $(".tooltip").hide();
    }
    else {
        $('.add-xy-scale-row').attr('disabled', false).prop('value', "");
    $(".tooltip").show();
    }
});

Upvotes: 1

collapsar
collapsar

Reputation: 17238

Use these code updates:

$(document).ready(function () { 
    $('.dlt-xy-scale-row').attr('disabled', true); 
});

// ...

$(".add-xy-scale-row").on("click", function () {
   // ...
   $('.dlt-xy-scale-row').attr('disabled', false);
});

$(".dlt-xy-scale-row").on("click", function () {
    $('.add-xy-scale-row').attr('disabled', false);
    $(".xy-table .last-row").prev().not(":first-child").remove();
    if ($(".xy-table .last-row").prev(":first-child").length > 0) {
        $('.dlt-xy-scale-row').attr('disabled', true);
    }
});

It will preserve the first row and re-enable the button to add new table rows.

See it in action (adopted from the OP's fiddle)

Edit

Disabling/enabling the deletion button corrctly handled.

Upvotes: 1

Cayce K
Cayce K

Reputation: 2338

This is how I add and remove rows. It will always remove the row that is equal to the .deleteRow item.

Here is a fiddle of 100% working iteration with your code. 

$(document).on('click','#add-row',function(){
        var cells = [
                'CONTENT'
        ],
        cell,
        tbody   = document.getElementById('schedule-items'),
        row     = tbody.insertRow(-1); // -1 = lastRow

    for(var i = 0; i < cells.length; i++){
       cell = row.insertCell(i);
       cell.innerHTML = cells[i];
    }
});

$(document).on('click','.deleteRow',function(){
    var r = this.parentNode.parentNode.rowIndex;

    document.getElementById('schedule-items').deleteRow(r);
});

Upvotes: 1

B. Kemmer
B. Kemmer

Reputation: 1537

As ImreNagy pointed out, you have to use 

$(".xy-table .last-row").prev().remove();

to remove the second last row.

Then you should add some IFs to ask if the button should be disabled or not like that 

if(counter > 0){
    $(".dlt-xy-scale-row").removeAttr('disabled');
} else {
    $(".dlt-xy-scale-row").attr('disabled', 'disabled');
}

JSFiddle Example

Upvotes: 1

gin93r
gin93r

Reputation: 1593

Try:

$(".xy-table tr:nth-last-child(2)").remove()

Upvotes: 1

ImreNagy
ImreNagy

Reputation: 511

$(".xy-table .last-row").prev().remove();

Of yourse you need to handle the situation that $(".xy-table .last-row").prev() is the first row if you don't want to delete that.

JSFiddle

Upvotes: 1

Related Questions