Question

Let’s have an example:

<table>
    <tr class="need"></tr>
    <tr class="no-need"></tr> // This is ourElement, needs to be removed
    <tr></tr>                 // This element needs to be removed
    <tr class="no-need"></tr> // This element needs to be removed
    <tr class="no-need"></tr> // This element needs to be removed
    <tr class="need"></tr>    // Elements removed until this
</table>

I want to remove those four elements at once.

This is what I’ve done:

function remove(ourElement) {
    var body = ourElement.parentNode,
        bodyRows = body.getElementsByTagName('tr');

    for (var i = 0; i < bodyRows.length; i++) {
        if (bodyRows[i] == ourElement) {
            if (!bodyRows[i+1].className) {
                body.removeChild(bodyRows[i+1]);
            }
        }
        if (bodyRows[i] > ourElement) {
            if (bodyRows[i].className == 'no-need') {
                body.removeChild(bodyRows[i]);
            }
            if (bodyRows[i].className == 'need') {
                break;
            }
        }
    }
    body.removeChild(ourElement);
}

The function removes only the first empy row after ourElement and the ourElement itself.

As i wrote above, I need to remove those four elements at first run of our function.

Pure Javascript needed.

Answer 1

you need something like this:

function remove(ourElement) {
    var body = ourElement.parentNode;
    var childRows = body.childNodes;

    var found = false;
    for (var i = 0; i < childRows.length; i++) {
        var row = childRows[i];

        if(found) {
            if(!row.className || row.className == "no-need") {
                body.removeChild(row);
                i--; // as the number of element is changed
            } else if(row.className == "need") {
                break;
            }
        }

        if(row == ourElement) {
            body.removeChild(ourElement);
            found = true;
            i--; // as the number of element is changed
        }
    }
}