WebDev

Just to make your pain a little less...

function collapseNestedDivs(element) {
  const childDivs = element.querySelectorAll('div');

  childDivs.forEach((div) => {
    collapseNestedDivs(div); // Recursively check for nested divs

    if (div.childElementCount === 1 && div.children[0].tagName === 'DIV') {
      const nestedDiv = div.children[0];
      const parent = div.parentNode;

      // Move the styles from the nested div to the parent div
      Array.from(nestedDiv.style).forEach((styleName) => {
        parent.style[styleName] = nestedDiv.style[styleName];
      });

      // Move the classes from the nested div to the parent div
      nestedDiv.classList.forEach((className) => {
        parent.classList.add(className);
      });

      // Remove the nested div
      parent.removeChild(nestedDiv);
    }
  });
}

// Call the function to collapse the nested divs starting from a root element
const rootElement = document.getElementById('root'); // Replace 'root' with your actual root element ID
collapseNestedDivs(rootElement);