CODEWITHSUNDEEP
javascriptjqueryhtml
user3432132
user3432132

Reputation: 37

Jquery deleting last tr until 1 is left

I have the current code in my view:

    <script>
$(document).ready(function()
{
    $("#add_instruction").click(function(){
        $("#instructions").append("<tr><td></td><td><input type='text' name='recipe_instruction[]' size='60'/></td></tr>");
    });

    $("#remove_instruction").click(function(){
        var counter = $("#instructions").children("tr").length;
        if(counter>1){
        $("#instructions tr:last").remove();}
    });

});
</script>
</head>
<body>
<table>
<th colspan='2'>Recipe Details</th>
<tr>
<td>Name:</td>
<td><input type='text' name='recipe_name'/></td>
</tr>
<tr>
<td>Description:</td>
<td><textarea cols='50' rows='5'name='recipe_description'></textarea></td>
</tr>
</table>
<table id='instructions'>
<th colspan='2'>Recipe Instructions</th>
<tr>
<td><input type='button' id='add_instruction' value='Add more instruction' /></td>
<td><input type='button' id='remove_instruction' value='remove last instruction'/></td>
</tr>
<tr>
<td></td>
<td><input type='text' name='recipe_instruction[]' size='60'/></td>
</tr>
</table>

Adding of tr is fine, but deletion is not working. Plus, am i doing it wrong? in deletion, i think its because of my if statement of counter. If i dont add an if statement that tracks if only 1 tr is left, the remove function would ruin the table by removing all tr if there is none left. How should i do this?

EDIT:

<table>
<th colspan='2'>Recipe Details</th>
<tr>
<td>Name:</td>
<td><input type='text' name='recipe_name'/></td>
</tr>
<tr>
<td>Description:</td>
<td><textarea cols='50' rows='5'name='recipe_description'></textarea></td>
</tr>
<tr id='instructions'>
<td><input type='button' id='add_instruction' value=' Add more instruction  ' /></br>
<input type='button' id='remove_instruction' value='Remove last instruction'/></td>

<td id='instruction'><input type='text' name='recipe_instruction[]' size='60'/></br></td>
</tr>
</table>

Is there any way of deleting until 1 is left?

Upvotes: 1

Views: 140

Answers (3)

Boldewyn
Boldewyn

Reputation: 82734

$('#instructions').children('tr').length is always 0. That's because browsers add an implicit <tbody> between them, and $.children() only finds immediate children. Therefore use the more generic .find():

$("#remove_instruction").click(function(){
  var counter = $("#instructions").find("tr").length;
  if(counter>1){
    $("#instructions tr:last").remove();
  }
});

(Just note, that this will be wrong, when you have nested tables.)

Upvotes: 0

VisioN
VisioN

Reputation: 145398

Maybe you should keep it easy:

$("#remove_instruction").click(function() {
    $('#instructions tr:has([name="recipe_instruction[]"]):last').remove();
});

This will remove last <tr> in #instructions which contains element with attribute name equal to recipe_instruction[].

DEMO: http://jsfiddle.net/bCpuX/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

You need

$("#remove_instruction").click(function () {
    var $trs = $("#instructions tr");
    if ($trs.length > 3) {
        $trs.last().remove();
    }
});

Demo: Fiddle

  • table.children('tr'), won't work because the browser add a tbody between the table and the trs
  • You have 2 static rows you need those 2 + 1
  • also it is best to cache the tr result and use it inside the if condition

Upvotes: 3

Related Questions