Удаление td с помощью JavaScript
Есть ли способ удалить td (см. Прокомментированный td «подлежит удалению») из этой таблицы без редактирования HTML. Кроме того, я не использую только классы, поскольку у меня есть те же классы в других таблицах, которые мне не нужно удалять, поэтому также ориентируюсь на идентификатор диапазона. Заранее спасибо!
<div id = "pnlPersonalDetails2">
</div><table cellpadding = "0" cellspacing = "0" border = "0" class = "surveyquestions">
<tbody><tr>
<td colspan = "2" class = "pd_question">
<span id = "lbl2"></span>
</td>
</tr><tr>
<td class = "pd_label">FIRST NAME<span class = "red"> *</span></td>
<td>
<input name = "Name微statictext_2" type = "text" id = "Name微statictext_2" class = "pd_textbox">
</td>
<!-- To be removed
<td class = "error_label">
<span id = "ctl03" style = "visibility:hidden;">Required Field</span>
</td>-->
</tr>
</tbody></table>
<div id = "pnlPersonalDetails3">
</div><table cellpadding = "0" cellspacing = "0" border = "0" class = "surveyquestions">
<tbody><tr>
<!-- To be removed
<td colspan = "2" class = "pd_question">
<span id = "lbl3"></span>
</td>-->
</tr><tr>
<td class = "pd_label">LAST NAME<span class = "red"> *</span></td>
<td>
<input name = "Name微statictext_3" type = "text" id = "Name微statictext_3" class = "pd_textbox">
</td>
<td class = "error_label">
<span id = "ctl04" style = "visibility:hidden;">Required Field</span>
</td>
</tr>
Вот как это выглядит сейчас
введите описание изображения здесь
Вот как я хочу выглядеть после удаления прокомментированных td
введите описание изображения здесь
Я прикрепил сюда весь код https://codepen.io/duicug/pen/VGreQZ
Я предполагаю, что он хочет скрыть ЛЮБОЙ td, перед которым стоит комментарий "To be hidden"
@vsync где Крис трогает HTML? `
@vsync "удаление td" и "без касания HTML" уже противоречиво, поэтому я предполагаю, что то, что я предложил, пока подходит ("прикосновение к HTML", вероятно, означает "изменение на стороне сервера")
OP: определить «удаление»
как насчет row.find('td:nth-of-type(<the index of the td to be hidden>)').hide();
прокомментированные td создают пространство, которое я хочу удалить
@Duicug - Нет, закомментированные теги td в tr не «создают пространство». Пожалуйста, обновите свой вопрос, добавив минимальный воспроизводимый пример, демонстрирующий проблему, и четкое ее описание (вы сказали противоречивые вещи, что вы хотите удалить td и что вы хотите удалить «пробел»). В идеале сделать MCVE работоспособный с помощью Stack Snippets (кнопка панели инструментов [<>]; вот как это сделать).
@Chris G, не касаясь HTML, который я имел в виду, например, без добавления идентификатора в td
@Duicug Здесь мы говорим о закомментированном <td>, так что даже если бы он создавал пространство (а это не так), оно было бы горизонтальным.
@Chris G Причина, по которой я поместил td, который я хочу удалить, в комментариях, заключалась в том, чтобы попытаться быть конкретным, но похоже, что это была не очень хорошая идея. В моем коде нет комментариев в HTML, и у меня вообще нет доступа для редактирования HTML напрямую.
@Duicug Это то, что я предполагал, см. Решение, которое я опубликовал в моем первом комментарии. Я вижу, что ваши <td> - это блоки, поэтому я поправляюсь; они действительно создают вертикальное пространство.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
<td id = "hideTD" class = "error_label" style = "visibility: hidden;">
<span id = "ctl03" style = "visibility:hidden;">Required Field</span>
</td>
<script>
document.getElementById("hideTD").style.visibility = "hidden";
</script>
Вы можете сослаться на этот сайт, хороший образец https://www.w3schools.com/jsref/prop_style_display.asp
Надеюсь, это поможет вам.
Спасибо за ответ. К сожалению, это не помогает, поскольку вы добавили идентификатор в td, который, как я уже упоминал, мне не разрешено редактировать HTML.
Вы можете использовать querySelector, чтобы найти такой класс:
var target = document.querySelector("#pnlPersonalDetails2 .error_label");
Затем есть несколько способов удалить его из DOM.
Вы можете оставить его в памяти, чтобы потом легко показать его снова:
target.style.display = "none"; //Undo by setting to "" or to previous value
Или вы можете сделать его невидимым, чтобы оставить его в памяти и изменить расположение окружающего содержимого:
target.style.visibility = "hidden"; //Undo by setting to "" or to previous value
Или вы можете полностью удалить его из DOM:
target.parent.removeChild(target);
попробуйте с помощью jquery:
$("#lbl2").toggle();
может это тебе поможет? var el = document.getElementById ('lbl2'); el.parentElement.hidden = true; или удалить td var el = document.getElementById ('ctl03'); el.parentElement.remove ();
<td class = "error_label">
<span id = "ctl03" style = "visibility:hidden;">Required Field</span>
</td>
<td colspan = "2" class = "pd_question">
<span id = "lbl3"></span>
</td>
<script>
document.getElementById("ctl03").parentElement.remove();
document.getElementById("lbl3").parentElement.remove();
</script>
Я только что обновил свой вопрос кодом. Вы можете найти это здесь codepen.io/duicug/pen/VGreQZ Все еще ищите решение
Это решение вашего вопроса «как удалить некоторые TD. Для достижения результата, который показан на картинке, вам необходимо изменить правила макета или стиля. Разрыв между текстовым полем имени и ячейкой фамилии составляет (после удаления нужной ячейки ) a <TD id = error_label>. Вы можете удалить и его, или поиграться с правилами CSS и т. д. Или задать новый вопрос.
С jQuery:
$("#ctl03").parent().hide()или$("#ctl03").closest('td').hide()