Удалить все строки в таблице HTML с помощью JavaScript

Question 1

У меня есть таблица HTML в моем представлении MVC.

Вот код этой таблицы:

<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>

Мне нужно удалить все строки в таблице, поэтому мне нужно удалить все в patients.

Я попытался сделать это, как показано ниже, через JS, но он удаляет только первую строку:

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

Как удалить все строки?

javascript jquery html dom jquery-selectors

1

Sukhomlin Eugene 23 Июл 2017 в 14:31

1

Элемент с id=patients является элементом <tr> и его недопустимый html из-за повторяющихся атрибутов id. Добавьте элементы <thead> и <tbody> с атрибутом id и удалите элементы <tr> из <tbody> с помощью .empty()

–

user3559349

23 Июл 2017 в 14:34

Спасибо, это помогает @ StephenMuecke

–

Sukhomlin Eugene

23 Июл 2017 в 14:39

Answer

Идентификатор используется для идентификации уникального элемента в DOM. Вы неправильно генерируете несколько элементов с одним и тем же идентификатором в цикле foreach. Вы можете подумать о переходе с id на class. Это позволяет идентифицировать несколько элементов одного типа:

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

Затем соответствующий селектор удаляет все строки:

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

1

Daniel 23 Июл 2017 в 14:39

Question 2

Идентификатор используется для идентификации уникального элемента в DOM. Вы неправильно генерируете несколько элементов с одним и тем же идентификатором в цикле foreach. Вы можете подумать о переходе с id на class. Это позволяет идентифицировать несколько элементов одного типа:

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

Затем соответствующий селектор удаляет все строки:

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

1

Daniel 23 Июл 2017 в 14:39

Удалить все строки в таблице HTML с помощью JavaScript

1 ответ

Похожие вопросы

Новые вопросы

javascript