Delete A Record From Dynamic table using javascript

Question

I have Generated Dynamic Table Using Following Code in C# + Mongodb

for (var i = 0; i < data.length; i++) {
                strData += "<tr>\
                   <td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
                               <td><input type='button' id='delete' value='delete' sid='" + data[i].sid + "' onclick='deleteRecord()'></td>\
                               <td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
                               </tr>";
            }
             //$("#data").append(tabelHerader); 
            $("#data").html(strData);

Now I Want To delete Record when I click To Delete Button the Following Function Will Execute

 function deleteRecord() {
            var sid = $("#delete").attr("sid");
            alert(sid);
           // console.log("yes we are in");
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'Home.aspx/deleteData',
                data: "{'id':'" + sid + "'}",
                async: false,
                success: function (response) {
                    alert("you have successfully deleted record");
                },
                error: function () {
                    console.log('there is some error');
                }
            });


        }

But The Problem Is That When I Click To Delete Button I get Same Id For Each Record ,So If I Click Any Button Only First Record Will Delete. Anyone Have Solution?

change var sid = $("#delete").attr("sid"); var sid = $(this).attr("sid"); — lukesUbuntu
– lukesUbuntu, Commented Dec 25, 2017 at 6:54
OPtion 1 - you can add the sid/id to the tr directly to delete and Option 2 pass the sid/id to the function directly — Arijit Mukherjee
– Arijit Mukherjee, Commented Dec 25, 2017 at 6:55
no its not working with class,id or by passing value in function as parameter — user8718405
– user8718405, Commented Dec 25, 2017 at 7:26

Prasanna Venkatesh · Accepted Answer · 2017-12-25 07:39:13Z

1

Id must be unique for each element use class instead of id or simply pass id to the function as below

for (var i = 0; i < data.length; i++) {
    var sid = data[i].sid;
                strData += "<tr>\
                   <td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
                               <td><input type='button' value='delete' sid='" + data[i].sid + "' onclick='deleteRecord("+ sid +")'></td>\
                               <td><input type='button' value='update' sid='" + data[i].sid + "' onclick='updateRecord("+ sid +");'></td>\
                               </tr>";
            }
             //$("#data").append(tabelHerader); 
            $("#data").html(strData);

and in your update record or delete record function do as below

function deleteRecord(sid) {

        alert(sid);
       // console.log("yes we are in");
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: 'Home.aspx/deleteData',
            data: "{'id':'" + sid + "'}",
            async: false,
            success: function (response) {
                alert("you have successfully deleted record");
            },
            error: function () {
                console.log('there is some error');
            }
        });


    }

edited Dec 25, 2017 at 7:39

answered Dec 25, 2017 at 6:51

Prasanna Venkatesh

4164 silver badges16 bronze badges

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

5 Comments

user8718405 Over a year ago

i try both way using class its repeat same id ans using function parameter its give me Unexpected Token error

Prasanna Venkatesh Over a year ago

debug sid value exists and try the above

Prasanna Venkatesh Over a year ago

your sid is string then try to store it in a variable and then use it

user8718405 Over a year ago

but without the array how can u pass sid to the function

Prasanna Venkatesh Over a year ago

i have simply added a variable inside the loop and it will change for each iteration but without the array how can u pass sid to the function?

Rubi Jihantoro · Accepted Answer · 2017-12-25 15:38:37Z

1

first, you need to change your function, add 1 argument to your function

function deleteRecord(id) {

then change var sid value to be var sid = id;

With onclick, you can use

onclick="deleteRecord(pass_some_id from data[i].sid)"

Without onclick, var sid = $("#delete").attr("sid"); will choose first sid attribute value from input list, so what you need is

$("#delete").each(function(){
  $(this).onclick(function(){
    var sid = $(this).attr("sid"); // get attr value from specify clicked button
    deleteRecord(sid); // call delete record with specify id
  })
})

or simply way :

change

var sid = $("#delete").attr("sid");

to

var sid = $(this).attr("sid"); // select attribute value from current clicked element

Full Example from @lukesUbuntu :

https://jsfiddle.net/mvLwymvb/

here some good reference :

edited Dec 25, 2017 at 15:38

answered Dec 25, 2017 at 6:54

Rubi Jihantoro

2741 gold badge6 silver badges16 bronze badges

7 Comments

user8718405 Over a year ago

but when i try to pass an argument in my function its give me unexpected token error , i think that is the main problem

user8718405 Over a year ago

if i pass "onclick='check("+ data[i].sid +")" this code the it is giving me Invalid or Unexpected Token error and i pass "onclick='check('"+ data[i].sid +"')" its show something like this onclick(" 5a4096c97169a0033475b51e')

Rubi Jihantoro Over a year ago

right onclick(" 5a4096c97169a0033475b51e') , then make sure you have argument in your function

Rubi Jihantoro Over a year ago

ups, something wrong "{'id':'" + sid + "'}" need to change to {id:sid}

user8718405 Over a year ago

i have an argument .it still give me the "unexpected tocken } " error

|

brk · Accepted Answer · 2017-12-25 06:50:59Z

You can append the value of i with the id and onclick you can pass the context using this

 "<tr>" +
        "<td>" + data[i].sid + "</td>" +
        "<td> " + data[i].fname + " </td>" +
        "<td>" + data[i].lname + "</td>" +
        "<td>" + data[i].email + "</td>" +
        "<td>" + data[i].pass + "</td>" +
        "<td>" + data[i].address + "</td>" +
        "<td><input type='button' id='delete_'"+i+" value='delete' " +
                                     // ^ changed here
        "sid='" + data[i].sid + "' onclick='deleteRecord(this)'></td>" +
        "<td><input type='button' id='update_'"+i+" value='update'" +
                                  // ^ Changed here
        " sid='" + data[i].sid + "' onclick='updateRecord(this);'></td>" +
        "</tr>";

in deleteRecord function

function deleteRecord(elem){
   var getId = elem.id // id of the clicked element

}

lukesUbuntu · Accepted Answer · 2017-12-25 08:47:42Z

0

Working example here https://jsfiddle.net/mvLwymvb/1/

for (var i = 0; i < data.length; i++) {
    strData += "<tr>\
    <td>" + data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
    <td><input class='delete' type='button' id='delete' value='delete' sid='" + data[i].sid + "'></td>\
    <td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
    </tr>";
  }

  //$("#data").append(tabelHerader);
  $("#data").html(strData);


  $(".delete").click(function() {
    var sid = $(this).attr("sid");
    alert(sid);
    // console.log("yes we are in");
    $.ajax({
      type: 'POST',
      contentType: "application/json; charset=utf-8",
      url: 'Home.aspx/deleteData',
      data: "{'id':'" + sid + "'}",
      async: false,
      success: function(response) {
        alert("you have successfully deleted record");
      },
      error: function() {
        console.log('there is some error');
      }
    });
  })

edited Dec 25, 2017 at 8:47

answered Dec 25, 2017 at 7:05

lukesUbuntu

5172 gold badges12 silver badges22 bronze badges

1 Comment

lukesUbuntu Over a year ago

@vaibhav have you tried passing onclick='deleteRecord(this)'

user8718405 · Accepted Answer · 2017-12-25 10:39:00Z

Finally I Got The Solution And That Solution is A Deligets

  function check()
        {
            $(document).on('click', '#delete', function (event) {

                var element = event.target;
                var sid = $(element).attr("sid");
                console.log(sid);
                deleteRecord(sid);

            });

        }

        function deleteRecord(sid) {

           // console.log("yes we are in");
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'Home.aspx/deleteData',
                data: "{'id':'" + sid + "'}",
                async: false,
                success: function (response) {
                    alert("you have successfully deleted record");
                }   ,
                error: function () {
                    console.log('there is some error');
                }
            });

This Is Html Part

 for (var i = 0; i < data.length; i++) {
                var sid = data[i].sid
                strData += "<tr>\
                   <td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
                               <td><input type='button' id='delete' value='delete' sid='" + sid + "' onclick='check()' ></td>\
                               <td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
                               </tr>";
            }

Thank You so much Every One

halfer · Accepted Answer · 2018-09-01 09:56:50Z

Don't mess up with native JavaScript and jQuery. You will confuse later.

First don't do inline onclick when you have jQuery, use $(elem).click(function) instead.

Second id must be unique (1 id must be used by 1 element only), class is general (1 class can be used by many element).

Try to edit this line

...
<td><input type='button' id='delete' value='delete' class="btn-delete" sid='" + data[i].sid + "' ></td>\
...

and your script

<script>
    $(function(){
        $('body').on('click', '.btn-delete', function(){
            var sid = $(this).attr("sid");
            var tr = $(this).closest('tr');
            //alert(sid);
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'Home.aspx/deleteData',
                data: {id: sid},
                //async: false, why you need to do this????
                success: function (response) {
                    console.log(response);
                    alert("you have successfully deleted record");
                    tr.remove();
                },
                error: function (response) {
                    console.log('there is some error');
                    console.log(response);
                }
            });
        }) 
    });
    </script>

Collectives™ on Stack Overflow

Delete A Record From Dynamic table using javascript

6 Answers 6

5 Comments

7 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

7 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related