Delete all rows in a HTML table using JavaScript

Question

I have a HTML table in my MVC View.

Here is the code of this table:

<table class="table" >
    @{int rowNo = 0;}
    <tr>
        <td data-toggle="modal" data-target="#newAppointment" style="height: 40px; width: 40px; background: red;">
            <img style="object-fit: cover;" src='@Url.Content("~/Images/plus.png")'/>
        </td>
    </tr>
    <tr style="background: white">
        <th></th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Date of birth
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last Name
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            First Name
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr id="patients">
            <td class="point">
                @(rowNo += 1)
            </td>
            <td class="title">
                @Html.DisplayFor(modelItem => item.Date_of_Birthday)
            </td>
            <td class="title">
                @Html.DisplayFor(modelItem => item.Last_name)
            </td>
            <td class="title">
                @Html.DisplayFor(modelItem => item.First_name)
            </td>
        </tr>
    }
</table>

I need to delete all the rows in the table, so I need to delete everything in patients.

I tried to do it like the following via JS, but it only deletes the first row:

<script>
    $('#search').click(function () {
        $("#patients").remove();
    });
</script>

How can I delete all the rows?

The element with id=patients is a <tr> element and its invalid html because of the duplicate id attributes. Add a <thead> and <tbody> element with an id attribute and remove the <tr> elements from the <tbody> using .empty() — user3559349
– user3559349, Commented Jul 23, 2017 at 11:34

Daniel · Accepted Answer · 2017-07-23 11:39:27Z

1

An id is used to identify a unique element in the DOM. You're incorrectly generating multiple elements with the same id within your foreach loop. You might consider changing from id to class. Which allows the identification of multiple elements of the same type:

@foreach (var item in Model) {
    <tr class="patients">
        <!-- your code goes here -->
    </tr>
}

Then the appropriate selector removes all rows:

$('#search').click(function () {
   $(".patients").remove();
});

answered Jul 23, 2017 at 11:39

Daniel

3,5243 gold badges36 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Delete all rows in a HTML table using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related