Question

我们举个例子：

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

我想一次删除这四个元素。

这就是我所做的：

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);
}

该函数仅删除ourElement和ourElement之后的第一个empy行。

正如我上面所写，我需要在第一次运行函数时删除这四个元素。

需要纯Javascript。

Answer 1

我刚刚意识到你可能正在寻找一个功能来删除边界内的项目让我们说：类“需要”和类“需要”之间的项目并删除其中的所有项目。如果那是你的问题，答案如下：

function remove( tagElement, boundClass ) {

    var tr = document.getElementsByTagName(tagElement), 
        re = new RegExp("(^|\\s)"+ boundClass +"(\\s|$)"),
        bound = false,
        r = [];

    for( var i=0, len=tr.length; i<len; i++ )  {

        if(  re.test(tr[i].className) ) { 
            bound = ( bound === true ) ? false : true;            
            if(bound) continue;
        }

        if( bound ) r.push( tr[i] );
    }

    while( r.length )
        r[ r.length - 1 ].parentNode.removeChild( r.pop() ); 

}

remove( "tr", "need" ); // use it like this

Answer 2

你需要这样的东西：

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

Answer 3

您不能将<或>运算符与DOM元素一起使用。

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

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

Answer 4

尝试这一点，每次删除一个孩子时，它会减少i以补偿：

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

    for (var i = 0; i < bodyRows.length; i++) {
        if (!lb && bodyRows[i] != ourElement) {
            continue;
        } else if(bodyRows[i] == ourElement){
            lb = true;
        }
            if (bodyRows[i].className == 'no-need' || !bodyRows[i].className) {
                body.removeChild(bodyRows[i]);
                i--;
            }
    }
}

将元素从一个删除到另一个

4 个答案: