Delete table row with Javascript

Question

Currently I have a table for information called episodes. The table has fields consisting of title, air date, episode number, and plot. I use javascript to clone the fields and also to delete them. My problem is the delete function deletes only the title, airdate, and episode number; however the plot box remains. The problem from what I can tell is that the plot is wrapped in a different <tr></tr> tag. How do I get the delete function to delete both sets?

Here is the table

<table id="template" style="display: none">
<tr class="line">
    <td width="50%">
    <label><?php _e('Episode Title'); ?></label>
    <p>
      <input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:100%;" />
    </p>    
    </td>

    <td width"10%">        
    <label><?php _e('Airdate'); ?></label>
    <p>
      <input type="text" name="episode_airdate[]" id="episode_airdate[]" value="" class="airdate regular-text" style="width:100%" />
    </p>
    </td>

     <td width="10%">        
    <label><?php _e('Season:'); ?></label>
    <p>
          <?php

            for($i=1; $i<=50; $i++)
                $season_nums[]=$i;

            echo '<select name="episode_season[]" select id="episode_season[]" class="season regular-text" style="100%">';
                echo '<option value="">' . __("Season" ) . '</option>';
                foreach($season_nums as $season_num){
                    $selected = '';
                    echo '<option value="' . $season_num . '" ' . $selected . '>' . $season_num . '</option>';
                }
            echo '</select>';
            ?>
    </p>
    </td>

    <td width="10%">        
    <label><?php _e('Episode:'); ?></label>
    <p>
      <input type="text" name="episode_number[]" id="episode_number[]" value="" class="number regular-text" style="width: 100%" />
    </p>
    </td>



    <td width="10%" class="commands">
        <a rel="delete" class="button">-</a> <a rel="add" class="button">+</a>
    </td>


</tr>

<tr class="line2"> 
   <td width="100%">       
    <label><?php _e('Plot:'); ?></label>
      <textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text"value="" cols="100%" rows="10" tabindex="4" ><?php echo $_POST['episode_season'] ?></textarea>
    </td>
</tr>

Here is the JavaScript

        // Delete the "-" button in first row
    $('#attachments tr:first-child .commands a[rel="delete"]').remove();
}

function items_add()
{
    obj = $('#template tr').clone().appendTo('#attachments');
    lines++;

    if (arguments.length > 0) {
        options = arguments[0];

        $('.title', obj).val( options.title );
        $('.airdate',   obj).val( options.airdate );
        $('.season',   obj).val( options.season );
        $('.number',   obj).val( options.number );
        $('.plot',   obj).val( options.plot );
    }
}

$('#attachments').delegate('.commands a', 'click', function()
{
    var action = $(this).attr('rel');
    var confirm_delete = true;

    // Add action
    if ('add' == action) {
        items_add();
    }

    // Delete action
    if ('delete' == action) {
        // La TR en la tabla
        var oTr = $(this).parent().parent();
        var episode_name = $('.title', oTr).val();
        var episode_airdate = $('.airdate', oTr).val();
        var episode_season = $('.season', oTr).val();
        var episode_number  = $('.number', oTr).val();
        var episode_plot  = $('.plot', oTr).val();


        if (episode_name != '' || episode_number != '' || episode_plot != '') {
            if ( !confirm('Are you sure you want to delete ' + episode_name + '?') ) {
                confirm_delete = false;
            }
        }

        if (confirm_delete) {
            oTr.remove();
            lines--;
        }
    }
});

$(document).ready(function()
{
    items_init();
});

})(jQuery);

Your help will be greatly appreciated

it would be easier if you showed the generated html markup and not the php markup. — epascarello
– epascarello, Commented Apr 19, 2012 at 18:13
Did you try to change oTr.remove(); to oTr.next().remove(); oTr.remove();? — Prusse
– Prusse, Commented Apr 19, 2012 at 18:15
Have you thought about using IDs? Adding say r_###_one and r_###_two to your rows (where ### = your numeric ID) then you can just split on that id and use it for deleting both at once. $('#r_'+id+'_one').remove(); etc... — user910533
– user910533, Commented Apr 19, 2012 at 18:18
@Yaypaul I Like that idea, I might implement it to prevent further troubles, thank you — Craig
– Craig, Commented Apr 19, 2012 at 18:25

Starx · Accepted Answer · 2012-04-19 18:18:20Z

1

Change this line

var oTr = $(this).parent().parent();

to

var oTr = $(this).closest("tr");

Then use oTr.remove()

answered Apr 19, 2012 at 18:18

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chepe263 · Accepted Answer · 2012-04-19 18:25:25Z

1

IDEA:

in php generate a random number like

$rand = time() * rand();

echo it on the line rows

<tr class="line" data-row="<?php echo $rand; ?>">

and

<tr class="line2" data-row="<?php echo $rand; ?>">

Using your delete function when someone clicks the link

var oTr = $(this).closest("tr");
var data-row =$(oTr).attr('data-row');
 $('tr[data-row=' + data-row + ']').remove();

the idea is have a unique string to identify tr with line and line2 classes

answered Apr 19, 2012 at 18:25

chepe263

2,81224 silver badges39 bronze badges

1 Comment

user910533 Over a year ago

Pretty much my comment above but using data- attributes. It will work just as good, unless you need to target an individual tr directly for some other process, then the ID route may help you more. @Craig

Collectives™ on Stack Overflow

Delete table row with Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related