issue with delete button javascript

Question

Heyy, I am new to javascript, and i am trying to understand how delete and update buttons work. i saw many suggestions but my delete button doesnt seem to work, I dont know where i went wrong. Help please

  <script type="text/javascript">
        function Delete(object){
            table = document.getElementById("table");
            row = document.getElementById(object);

            table.removeChild(row);
        };
    </script>

    <table id="table" class="table .table-bordered" style="width:50%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>DOB</th>
                        <th>Gender</th>
                        <th>Martial Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Sara</td>
                        <td>1-12-1990</td>
                        <td>Female</td>
                        <td>Married</td>
                        <button>Edit</button>
                        <button onclick="Delete">Delete</button>
                    </tr>
                 </tbody>
             </table>

and one more problem is that the delete button is showing on top of the table not in the action column why?

To answer the second question You must wrap your buttons in <td> elements like the others — Spade
– Spade, Commented Jul 7, 2015 at 8:26
you must give onclick a function like that onclick="Delete(id)" — Islam Zedan
– Islam Zedan, Commented Jul 7, 2015 at 8:26
yeah i forgot the parameters, but in my case which id it should be? i need to delete all the row @IslamZedan — Guest012393
– Guest012393, Commented Jul 7, 2015 at 8:37

Barmar · Accepted Answer · 2015-07-07 08:35:16Z

You need to pass the element as an argument to Delete(). The element is not an ID, so you shouldn't use getElementById with it, just access the element directly. You can use parentElement to go up the DOM hierarchy to find the containing row and table.

To solve the layout problem, you need to put the buttons inside <td>. Everything in a table row has to be in either <td> or <th>.

function Delete(object) {
  var row = object.parentElement.parentElement;
  var table = row.parentElement;
  table.removeChild(row);
};

<table id="table" class="table .table-bordered" style="width:50%">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>DOB</th>
      <th>Gender</th>
      <th>Martial Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Sara</td>
      <td>1-12-1990</td>
      <td>Female</td>
      <td>Married</td>
      <td><button>Edit</button></td>
      <td><button onclick="Delete(this)">Delete</button></td>
    </tr>
  </tbody>
</table>

Csaba Benko · Accepted Answer · 2015-07-07 08:30:05Z

0

The buttons should also go into a table cell

<td>
<button>Edit</button>
<button onclick="Delete();">Delete</button>
</td>

You also have to change the click event to be as above:

<button onclick="Delete();">Delete</button>

answered Jul 7, 2015 at 8:30

Csaba Benko

1,1618 silver badges15 bronze badges

1 Comment

Scott Over a year ago

This wont work. No actual parameters are supplied to Delete().

Collectives™ on Stack Overflow

issue with delete button 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