CODEWITHSUNDEEP
javascriptjquery
Jamie H
Jamie H

Reputation: 97

Remove a whole table if all rows are removed using jQUery

I have a table that contains dates within one table cell on each row. I use Javascript to detect today's date, and if the dates in the cell are before today's date, I remove the whole table row.

$(function(){
  $('.table-cell-containing-date').each(function(key,value){
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var date = new Date($(value).text());
    if(date < currentDate){
        $(value).parent().remove();
    }
  });
});

I'm trying to amend this so that once all dates in the table for a particular month are in the past (and therefore removed), the whole table itself should be removed.

I don't even know where to start to be honest. I need to check the whole table to see if any rows in each table exist after the above Javascript has fired, and if they don't, remove the whole table.

I've setup a Fiddle where you will see the first row being removed because the date is in the past. https://jsfiddle.net/67ktea40/1/

Many thanks in advance,

J

Upvotes: 1

Views: 437

Answers (5)

Sasikumar
Sasikumar

Reputation: 863

Add the two line as below 

$(function(){
    $('.production-date').each(function(key,value){
        var currentDate = new Date();
        currentDate.setHours(0, 0, 0, 0);
        var date = new Date($(value).text());
        if(date < currentDate){
            $(value).parent().remove();
            var count = $('.tour-dates-table tr').length;
            if(count<=2) $('.tour-dates-table').remove();
        }
    });
});

Updated version of answer for your question

$(function(){
    $('.production-date').each(function(key,value){
        var currentDate = new Date();
        currentDate.setHours(0, 0, 0, 0);
        var date = new Date($(value).text());
        if(date < currentDate){
            var currenttable = $(value).parent().closest('table');
            $(value).parent().remove();
            var count = $(currenttable).children('tr').length;
            if(count<=2) { $(currenttable).remove(); }
        }
    });
});

Upvotes: 1

Rambler
Rambler

Reputation: 5482

First bind an event to the table's container div.And then check for table rows length.If its zero remove the table.:

$('#container-div').on('DOMSubtreeModified', function(){
    if($('#myTable tr').length==0){
       $('#myTable').remove();
    }
});

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can check the table .has() no production-date element, then remove entire table.

var table = $('table.tour-dates-table');
if (table.has(".production-date").length == 0) {
  table.remove();
}

In DEMO, as I have removed all tr containing .production-date

Upvotes: 0

aavrug
aavrug

Reputation: 1889

Check if table has no tr then remove it

if (!$('table').find('tr').length){
    $('table').remove();
}

Upvotes: 0

Mike B
Mike B

Reputation: 2776

Check if it's empty and them remove it

  function deleteIfEmpty() {
    var tbody = $("table tbody");
    if (tbody.children().length == 0) {
       $("table").remove();
    }
  }

And call it after every row-removal.

Upvotes: 0

Related Questions