0

让我们举个例子：

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

该函数仅删除之后的第一个 empy 行ourElement及其ourElement本身。

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

需要纯 Javascript。

4

4 回答 4

3

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

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
于 2012-09-21T00:37:54.993 回答
1

你需要这样的东西：

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
        }
    }
}
于 2012-09-20T23:47:27.637 回答
0

不能将<or>运算符用于 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;
          }
        }
    }
}
于 2012-09-20T23:40:44.537 回答
0

试试这个，每次移除一个孩子时，它都会减少 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--;
            }
    }
}
于 2012-09-21T00:04:34.220 回答