Wrap Elements with same class next to each other in plain Javascript

Question

Looking for a way to wrap elements next to each other with same class in a wrapper. This can easily be done in jquery but I'm struggling to find a way in pure JS. I was able to remove empty tags between .group but not sure how to wrap those elements.

http://jsfiddle.net/chille1987/6cnjgft0/4/

Current HTML

1
2


3

Lorem ipsum dolor sit amet


    4
    5


Lorem ipsum dolor sit amet

6

Expected HTML


    1
    2 
    3


Lorem ipsum dolor sit amet


    
        4
        5
    
    

Lorem ipsum dolor sit amet


    6

Javascipt

// Create Wrapper
let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

// Add class to br parent
let brTags = document.querySelectorAll('br:first-child');
brTags.forEach(empty => {
    empty.parentNode.classList.add('empty-paragraph');
});

// remove empty paragraphs between groups
const empty = document.querySelectorAll('.empty-paragraph');
empty.forEach(paragraph => {
    if (paragraph.nextElementSibling.classList.contains('group') && paragraph.previousElementSibling.classList.contains('group')) {
        paragraph.remove();
    }
});

user_157247 · Answer

I figure I'd do it parent-by-parent, and I'd remove "blank" paragraphs in one pass then group things in another (you could do it all in one pass, but it's more complicated).

See comments inline:

// A function to handle one parent
function groupChildren(parent) {
    let child;

    // Remove "blank" paragraphs first
    child = parent.firstElementChild;
    while (child) {
        // Grab this first, since we may remove `child`
        const next = child.nextElementSibling;
        if (!child.classList.contains("group")) {
            // "Blank" means it has nothing but BR elements or blank text nodes
            const remove = child.tagName === "P" && Array.from(child.childNodes).every(c =>
                (c.nodeType === Node.TEXT_NODE && !c.nodeValue) ||
                (c.tagName === "BR")
            );
            if (remove) {
                parent.removeChild(child);
            }
        }
        child = next;
    }

    // Find and group .group paragraphs
    let group;
    child = parent.firstElementChild;
    while (child) {
        const next = child.nextElementSibling;
        if (child.classList.contains("group")) {
            if (!group) {
                // No group yet, create one and insert it
                group = document.createElement("div");
                group.classList.add("wrapper");
                parent.insertBefore(group, child);
            }
            // Move this into the current group
            group.appendChild(child);
        } else {
            // Break the group here
            group = null;
        }
        child = next;
    }
}

// Handle all of the `.group` elements; often later ones will have been
// handled when handling earlier ones in the same parent, so check for that
for (const child of Array.from(document.getElementsByClassName("group"))) {
    if (!child.parentElement.classList.contains("wrapper")) {
        groupChildren(child.parentElement);
    }
}

1
2


3

Lorem ipsum dolor sit amet


    4
    5


Lorem ipsum dolor sit amet

6

Wrap Elements with same class next to each other in plain Javascript

1 Answers