🇯🇸 Удаление элементов одного класса на странице – JavaScript

У меня возникла необходимость написать функцию Javascript Удаление элементов одного класса на странице. По своей сути это удаление всех узлов DOM с одинаковым классом (например class=”myclass”). Хоть и поиском
элементов в DOM по классу пользоваться не любят, но у меня был, похоже, только такой выбор. А как я решила проблему с реализацией скрипта в IE вы можете прочитать в статье getElementsByClassName кроссбраузерно Удаление узла DOM в JavaScript осуществляется с помощью метода removeChild, который удаляет элемент из его родителя. Синтаксис:

elem.removeChild(child)

Удаление элементов на странице одного класса и последующая их группировка

Исходные данные: В HTML документе есть один общий <div id=”my class””> . Внутри его располагается ряд дивов, который мне нужно сгруппировать (в примере в две группы). Ни к внешнему общему диву, ни к его внутренним детям доступа с помощью HTMLнет. Была возможность создать дополнительные внутренние дивы и присвоить им разные классы: myclass1 и myclass2. С помощью которых группы и можно идентифицировать. Вот как это выглядит:

<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 удаляется с общего списка, а вставляется уже после выведенного на странице Названия группы.

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

Попробовать в редакторе