У меня возникла необходимость написать функцию Javascript Удаление элементов одного класса на странице. По своей сути это удаление всех узлов DOM с одинаковым классом (например class=»myclass»). Хоть и поиском
элементов в DOM по классу пользоваться не любят, но у меня был, похоже, только такой выбор. А как я решила проблему с реализацией скрипта в IE вы можете прочитать в статье getElementsByClassName кроссбраузерно Удаление узла DOM в JavaScript осуществляется с помощью метода removeChild, который удаляет элемент из его родителя. Синтаксис:
Удаление элементов на странице одного класса и последующая их группировка
Исходные данные: В HTML документе есть один общий <div id=»my class»»> . Внутри его располагается ряд дивов, который мне нужно сгруппировать (в примере в две группы). Ни к внешнему общему диву, ни к его внутренним детям доступа с помощью HTMLнет. Была возможность создать дополнительные внутренние дивы и присвоить им разные классы: myclass1 и myclass2. С помощью которых группы и можно идентифицировать. Вот как это выглядит:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="myclass"> <div id="id01"> <div class="myclass1"><p>Red</p></div> </div> <div id="id02"> <div class="myclass1"><p>Green</p></div> </div> <div id="id04"> <div class="myclass2"><p>Yellow</p></div> </div> <div id="id05"> <div class="myclass1"><p>Black</p></div> </div> <div id="id06"> <div class="myclass2"><p>Violet</p></div> </div> <div id="id07"> <div class="myclass2"><p>Purple</p></div> </div> </div> |
Логика — псевдокод:
Так как элементов на странице с одинаковым классом предположительно много удаление элементов происходит с помощью цикла:
- Если элемент с заданным классом встречается впервые — вывести Называние группы;
- Найти элемент по классу;
- Определить родителя найденного элемента по классу — parent;
- Удалить parent(со всем содержимым);
- Вставить parent (со всем содержимым);
Parent удаляется с общего списка, а вставляется уже после выведенного на странице Названия группы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script text="javascript"> var mainparent = (document.getElementById("myclass")); // переменная внешнего узла var class1 = (document.getElementsByClassName("myclass1")); //переменная первого блока var class2 = (document.getElementsByClassName("myclass2"));//переменная второго блока class1.name = ("<h2>Первая группа цветов</h2>");//название первого блока class2.name = ("<h2>Вторая группа цветов</h2>");//название второго блока function removeChildren (classname) { if (classname[0]) {document.write(classname.name)};//при встрече в документе элемента с заданным классом первый раз - вставить название блока for(var i=0;i<classname.length; i++) { var parent = classname[0].parentNode;//родительский div для элемента с заданным классом mainparent.removeChild(parent);//удаление элемента с внешнего родительского узла, включая дочерний узел с заданным классом document.write(parent.outerHTML);//вставить дочерний элемент внешнего узла, включая дочерний узел с заданным классом } } removeChildren(class1); //выполнение функции для первой группы; removeChildren(class2);//выполнение функции для второй группы; </script> |