dynamicaly add and remove rows from table with jquery

Question

EDIT:

ok so far i've made one of my goals to remove row... but now i can't make to recreate deletion button in previous row after current row is deleted.. code looks like this

HTML:

<div id="container">
    <img id="header" src="images/header.png">
    <div id="content">
        <form id="survey_form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">
            <table id='survey_table' class="cols3">
                <tr>
                    <td class="row-1">1</td>
                    <td class="row-2"><input type="text" class="survey_textbox" required id="Klausimas1"/></td>
                    <td class="row-3"></td>
                </tr>
            </table>
            <input type="button" id="add_q" class="survey_button" value="Pridėti klausimą"/>
            <input type="submit" class="survey_button" value="Patvirtinti" style="float: right" onclick=""/>
        </form>
    </div>
</div>

and JQuery:

$(document).ready(function(){
    var x = 2;
    $("#add_q").click(function(){
        if (x <= 10){
            $("#survey_table").append("<tr id='tr"+x+"'>" +
                                        "<td class='row-1'>"+x+"</td>" +
                                        "<td class='row-2'><input type='text' class='survey_textbox' required id='Klausimas"+x+"'/></td>" +
                                        "<td id='td"+x+"' class='row-3'><input type='button' class='survey_button' value='-' id='del"+x+"'/></td>" +
                                      "</tr>");

            $("#del"+x).click(function(){
                $(this).parent().parent().remove();
                x--;
                $("#td"+x).append("<input type='button' class='survey_button' value='-' id='del"+x+"'/>");
            });
            $("#del"+(x-1)).remove();
            x++;
        }
    });
});

it looks like this line from JQuery

$("#td"+x).append("<input type='button' class='survey_button' value='-' id='del"+x+"'/>");

doesn't do the job it is supposed to do.. syntax looks good for me but i could be wrong. So maybe anyone could check where is the problem and help me out with solution? thanks in advance

vaso123 · Accepted Answer · 2014-11-28 15:26:44Z

1

Is this what you want? FIDDLE

     $('#container').on('click', '.survey_del', function() {
        var row = $(this).closest('tr');
        if (x >= 2) {
            x--;
        }
        var previous = $(row).prev('tr');
        $(previous).find('td.row-3').html("<input type='button' class='survey_del' style='float: right' value='-' id='del" + x + "'>");
        $(row).remove();
    });

And rename the del button class to survey_del.

edited Nov 28, 2014 at 15:26

answered Nov 28, 2014 at 15:13

vaso123

12.4k4 gold badges38 silver badges68 bronze badges

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

4 Comments

djdanas Over a year ago

well this solution seems that it might work, but somehow after some deletions and additions it goes to negative x variable :O

vaso123 Over a year ago

It not happens to me. But you can add a condition if (x >= 2) { x--; } so it won't be less then 1.

djdanas Over a year ago

i tried it with your link to fiddle, there it even duplicates delete button at some moment, but still i think i'll try to make something out from your solution cause it seems to work for me :)

djdanas Over a year ago

sorry for interupting you, but maybe you can solve my last litle problem now? :) it looks like you understand more about jquery than i do ;D

M. Page · Accepted Answer · 2014-11-28 15:15:18Z

0

I think that what you want is:

   $(document).ready(function(){
        var x = 1;
        $("#add_q").click(function(){
            if (x <= 10){
                $("#survey_table").append("<tr id='tr"+x+"'>" +
                "                              <td class='row-1'>"+x+"</td>" +
                "<td class='row-2'><input type='text' class='survey_textbox' required id='Klausimas"+x+"'></td>" +
                "<td class='row-3'><input type='button' class='survey_button' style='float: right' value='-' id='del"+x+"'></td>" +
                "</tr>");
                $("#del"+x).on('click', function(){console.log($(this)); $(this).parent().parent().remove()});
                x++;
            }
        });
    });

Fiddle: http://jsfiddle.net/z38t3n65/

answered Nov 28, 2014 at 15:15

M. Page

2,8342 gold badges23 silver badges35 bronze badges

3 Comments

djdanas Over a year ago

almost got it :) but there should be only one delete button on the last row of the table, and when pressed it deletes that line and creates delete button on previous row :) and x variable shoud go up or down by one depending on that :)

vaso123 Over a year ago

"delete everything in same row it is and create same delete button in previuos row." Not just delete the row. And in your example you do not decrase the x, so the ordering won't happens.

vaso123 Over a year ago

Lol.. no, it's the hungarian translation of a polish cartoon called lolek i bolek.

stengelp · Accepted Answer · 2014-11-28 15:17:41Z

0

To avoid multiple parent() calls you even could use parents().

$("#del" + x ).click(function() {
     $(this).parents("tr").remove()
});

I made a jsfiddle with a test.

http://jsfiddle.net/u8gfrazu/

answered Nov 28, 2014 at 15:17

stengelp

631 silver badge10 bronze badges

Collectives™ on Stack Overflow

dynamicaly add and remove rows from table with jquery

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related