user1475477 user1475477 - 2 months ago 5
jQuery Question

Remove table row if specific cell has been emptied jquery

I have a two-column table that displays a list of filters, and those filters can be removed by clicking a little "x" icon next to each:

<td class="filter-point">State is</td>
<td class="tag-column"><div class="tag">California <i class="fa fa-close"></i></div></td>

$("td.tag-column .tag i").click(function(){

I want to be able to remove the entire row if all of the tags have been removed (if td.tag-column is empty), but I can't seem to figure out the right syntax or method for attaching the row emptying to the tag emptying.


Just extend your current click event to check, after each tag removal, if the row has any tags left:

$("td.tag-column .tag i").click(function(){
    var td = $(this).closest('td');
    $(this).parent().remove(); //remove tag
    if (!td.children('.tag').length) td.parent().remove(); //if no tags left, remove row