Как обратиться к определенному элементу внутри div и удалить весь div родительский?
Имеется html элемент
<div class="case-col col-lg-4 col-md-6"> <div class="new-caseItem"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"> <a href="" rel="tag">Автотематика</a> </div> <div class="new-caseItem-title"> <a href="">Увеличение трафика из поиска в 3 раза за пол года в автотематике</a> </div> <div class="new-caseItem-expect"></div> <div class="new-caseItem-button"> <a class="btn-new" href="">Читать кейс</a> </div> </div> </div> </div> <div class="case-col col-lg-4 col-md-6"> <div class="new-caseItem"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"> <a href="" rel="tag">Онкология</a> </div> <div class="new-caseItem-title"> <a href="">Увеличение SEO трафика и конверсии в клиническом центре Онкологии</a> </div> <div class="new-caseItem-expect">Медицинский центр «АСС Медикал»</div> <div class="new-caseItem-button"> <a class="btn-new" href="">Читать кейс</a> </div> </div> </div> </div> |
<div class="case-col col-lg-4 col-md-6"> <div class="new-caseItem"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"> <a href="" rel="tag">Автотематика</a> </div> <div class="new-caseItem-title"> <a href="">Увеличение трафика из поиска в 3 раза за пол года в автотематике</a> </div> <div class="new-caseItem-expect"></div> <div class="new-caseItem-button"> <a class="btn-new" href="">Читать кейс</a> </div> </div> </div> </div> <div class="case-col col-lg-4 col-md-6"> <div class="new-caseItem"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"> <a href="" rel="tag">Онкология</a> </div> <div class="new-caseItem-title"> <a href="">Увеличение SEO трафика и конверсии в клиническом центре Онкологии</a> </div> <div class="new-caseItem-expect">Медицинский центр «АСС Медикал»</div> <div class="new-caseItem-button"> <a class="btn-new" href="">Читать кейс</a> </div> </div> </div> </div>
мне нужно с помощью jquery, найти блок с тегом содержащим, допустим текст "онкология" и удалить из html файла его родительский элемент "div class="case-col col-lg-4 col-md-6""
Дополнительно:
Ответы:
Нужно извлечь из страницы все ссылки с атрибутом rel="tag". Пройтись по списку найденных ссылок и найти ссылку с необходимым содержанием. Далее подняться на 4 предка вверх и удалить его.
let anchors = document.querySelectorAll('a[rel="tag"]'); for(let i = 0; i < anchors.length; i++) { if(anchors[i].innerHTML.indexOf('Онкология') >= 0) { anchors[i].closest('.case-col').remove(); break; } } |
let anchors = document.querySelectorAll('a[rel="tag"]'); for(let i = 0; i < anchors.length; i++) { if(anchors[i].innerHTML.indexOf('Онкология') >= 0) { anchors[i].closest('.case-col').remove(); break; } }
PS: Jquery должен умереть, не используйте его там, где справятся нативные функции JS.
- Можно и не отсчитывать родителей:
- anchors[i].parentNode.parentNode.parentNode.parentNode.remove(); + anchors[i].closest('.case-col').remove();
- anchors[i].parentNode.parentNode.parentNode.parentNode.remove(); + anchors[i].closest('.case-col').remove();
- Согласен.
- alexalexes,
$('.case-col').each(function(){ if ($(this).text().indexOf('Онкология')>=0) $(this).remove(); });
$('.case-col').each(function(){ if ($(this).text().indexOf('Онкология')>=0) $(this).remove(); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обращения к определенному элементу внутри div и удаления всего родительского div вам потребуется использовать JavaScript. Для начала вам необходимо определить, какой элемент вы хотите удалить. Допустим, у вас есть следующая структура HTML:
```html
```
Теперь, если вы хотите удалить, например, второй элемент (Элемент 2), вы можете сделать это следующим образом:
```html
var parent = document.getElementById('parent'); var childToRemove = parent.getElementsByClassName('child')[1]; parent.removeChild(childToRemove);var parent = document.getElementById('parent'); var childToRemove = parent.getElementsByClassName('child')[1]; parent.removeChild(childToRemove);
```
В данном примере мы сначала получаем родительский div с id "parent", затем получаем все дочерние элементы с классом "child" и выбираем второй элемент (индекс 1). После этого мы используем метод removeChild для удаления выбранного элемента из родительского div.
Если вам нужно удалить весь родительский div, включая все его дочерние элементы, можно сделать следующим образом:
```html
var parent = document.getElementById('parent'); parent.parentNode.removeChild(parent);var parent = document.getElementById('parent'); parent.parentNode.removeChild(parent);
```
В этом случае мы сначала получаем родительский элемент (тот, который нужно удалить), а затем вызываем метод removeChild на его родителе, чтобы удалить его полностью.
Надеюсь, это поможет вам решить вашу проблему!