從一個到/刪除元素，直到另一個

讓我們有一個例子：從一個到/刪除元素，直到另一個

<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後只刪除第一empy行和ourElement本身。

正如我上面寫的，我需要在我們的函數首次運行時刪除這四個元素。

純Javascript需要。

來源

2012-09-20 Hypn0tizeR

你可以使用jQuery嗎？ – Tool

請使用純Javascript。 – Hypn0tizeR

爲什麼不'if（！bodyRows [i + 1] .className || bodyRows [i + 1] .className =='no-need'）{' – JCOC611

你需要的東西是這樣的：

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-20 23:47:27 haynar

非常有趣的方法！這工作，非常感謝你。 – Hypn0tizeR

我很高興它有幫助 – haynar

您不能使用具有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-20 23:40:44 JCOC611

每次移除孩子時，您都必須減少索引'i'，因爲數字發生變化並且元素正在移動 – haynar

敏銳的觀察！我完全錯過了 – JCOC611

試試這個，每次刪除子就減少一次，我來補償：

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-21 00:04:34

我才意識到你可能會尋找刪除邊界內的項目的函數可以說：類「需要」和類「需要」之間的項目並刪除它們中的所有項目。如果這是你的問題的答案如下：

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-21 00:37:54

從一個到/刪除元素，直到另一個

回答

相關問題