add and delete row dynamically

Question

This is my js code:

<script>
function add(){
  $('#myTable tr:last').after('<tr><td>4<span onclick="del()">del row</span></td></tr>');
}
function del(){
  $(this).parent('tr').remove();
}
</script>

and html:

<table id="myTable" border="1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<span onclick="add()">add row</span>

My add button work nice but my del button not work. When del row clicked nothing happened.

It is here: '<tr><td>4<span onclick="del()">del row</span></td></tr>' stop downvote! — gdoron
– gdoron, Commented Jun 13, 2012 at 16:10
Couple of things. 1. this when using inline script is the window. 2. you need to replace parent with closest. 3. better use delegate event see my updated answer below. — gdoron
– gdoron, Commented Jun 13, 2012 at 16:15

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Little change with your code

function add(){
  $('#myTable tr:last').after('<tr><td>4<span onclick="del(this)">del row</span></td></tr>');
}
    
function del(el) {
    $(el).closest('tr').remove()
}

Working sample

Another easier approach, not need radical change in your code

I think more easy will be that, if you add a class to the del row span and remove onclick like following:

function add(){
  $('#myTable tr:last').after('<tr><td>4<span class="delRow">del row</span></td></tr>');
}

and set delegate event handler like following:

$('#myTable').on('click', 'span.delRow', del);

and write your del() function like following:

function del() {
  $(this).closest('tr').remove();
}

Working Sample

And one important note

Don't forget to place your whole code within

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

in short

$(function() {..})

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 13, 2012 at 16:05

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

1 Comment

Explosion Pills Over a year ago

You don't have to delegate. You can bind the click event when the span is created dynamically.

gdoron · Accepted Answer · 2012-06-13 16:12:37Z

1

Couple of things.

1. this when using inline script is the window.
2. you need to replace parent with closest.
3. better use delegate event

function del(){
     $(this).closest('tr').remove(); // closest!!
}    

$('#myTable').on('click', 'span', del);

edited Jun 13, 2012 at 16:12

answered Jun 13, 2012 at 16:06

gdoron

151k59 gold badges302 silver badges376 bronze badges

Comments

j08691 · Accepted Answer · 2012-06-13 16:12:50Z

1

Change your del function to:

function del(row){
  $(row).closest('tr').remove();
}

and your add function to:

$('#myTable tr:last').after('<tr><td>4<span onclick="del(this)">del row</span></td></tr>');

jsFiddle example.

answered Jun 13, 2012 at 16:12

j08691

209k33 gold badges269 silver badges281 bronze badges

Comments

Explosion Pills · Accepted Answer · 2012-06-13 16:25:58Z

this is not going to be span, so it's not going to find the parent. I wouldn't create global functions for these at all nor would I use script attributes. I would rewrite it as:

<table id="myTable" border="1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<span id="add">add row</span>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$("#add").on('click', function () {
   $('#myTable tr:last').after(
      $("<tr>")
         .append($("<td>", {text: '4'})
            .append($("<span>", {text: 'del row'})
               .on('click', function () {
                  $(this).closest('tr').remove();
               })
            )
         )
   );
});
</script>

sushil · Accepted Answer · 2012-06-13 16:05:39Z

0

You should use:

$(this).parent('#myTable tr').remove();

answered Jun 13, 2012 at 16:05

sushil

2,6813 gold badges20 silver badges24 bronze badges

Collectives™ on Stack Overflow

add and delete row dynamically

5 Answers 5

Little change with your code

Another easier approach, not need radical change in your code

And one important note

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Little change with your code

Another easier approach, not need radical change in your code

And one important note

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related