選択した `yes`入力に対応する行を削除するには？

Question

function removeItem(){ 
 
    var _table=document.getElementById("test"); 
 
    var len=_table.rows.length; 
 
    for(var i=0;i<len;i++){ 
 
     tr=_table.rows[i]; 
 
     if(tr.cells[0].firstChild.checked==true){ 
 
      tr.parentNode.removeChild(tr); 
 
      }  
 
     } 
 
    }

<table id = "test" border=1px;> 
 
    <tr><td>to_remove</td><td>f1</td><td>f2</td><td>f3</td></tr> 
 
    <tr><td><input type="radio" name="delete1">yes<input type="radio" name="delete1">no</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td><input type="radio" name="delete2">yes<input type="radio" name="delete2">no</td><td>4</td><td>5</td><td>6</td></tr> 
 
    <tr><td><input type="radio" name="delete3">yes<input type="radio" name="delete3">no</td><td>7</td><td>8</td><td>9</td></tr> 
 
    <tr><td><input type="radio" name="delete4">yes<input type="radio" name="delete4">no</td><td>10</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete5">yes<input type="radio" name="delete5">no</td><td>20</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete6">yes<input type="radio" name="delete6">no</td><td>30</td><td>11</td><td>12</td></tr> 
 
</table> 
 
<input type="button" value="remove" onclick="removeItem()">

行を削除するには、私のjsファイルでいくつかのバグがあります。
1.初めて、削除する2つの行を選択します。

2.削除をクリックすると、選択した行が削除され、2行削除後にエラーが発生します。 3. 2回目は、最初に削除する2行を選択します。

4.削除をクリックすると、1つの行だけが削除されました.1つの行を削除した後も同じエラーが発生します。

私のjsコードには2つのバグがあります。
bug1：行を削除した後にエラーが発生しますか？
なぜtrは定義されていませんか？
bug2：なぜ2番目の選択で2つの行を選択するときに1つの行だけを削除するのですか？

Answer 1

私はwhileループを使用して、このかなりクリーンな代替案を提案することができますか？

function removeItem(){ 
 
    var table=document.getElementById("test"); 
 
    var r=table.rows.length-1; 
 
    while(row=table.rows[r--]) 
 
    { 
 
    if(row.cells[0].firstChild.checked==true) row.remove(); 
 
    } 
 
}

<table id = "test" border=1px;> 
 
    <tr><td>to_remove</td><td>f1</td><td>f2</td><td>f3</td></tr> 
 
    <tr><td><input type="radio" name="delete1">yes<input type="radio" name="delete1">no</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td><input type="radio" name="delete2">yes<input type="radio" name="delete2">no</td><td>4</td><td>5</td><td>6</td></tr> 
 
    <tr><td><input type="radio" name="delete3">yes<input type="radio" name="delete3">no</td><td>7</td><td>8</td><td>9</td></tr> 
 
    <tr><td><input type="radio" name="delete4">yes<input type="radio" name="delete4">no</td><td>10</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete5">yes<input type="radio" name="delete5">no</td><td>20</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete6">yes<input type="radio" name="delete6">no</td><td>30</td><td>11</td><td>12</td></tr> 
 
</table> 
 
<input type="button" value="remove" onclick="removeItem()">

Answer 2

function removeItem(){ 
 
    var _table=document.getElementById("test"); 
 
    var len=_table.rows.length 
 
    for(var i=len-1;i>=0;i--){ 
 
     tr=_table.rows[i]; 
 
     if(tr.cells[0].firstChild.checked==true){ 
 
      tr.parentNode.removeChild(tr); 
 
      }  
 
     } 
 
    }

<table id = "test" border=1px;> 
 
    <tr><td>to_remove</td><td>f1</td><td>f2</td><td>f3</td></tr> 
 
    <tr><td><input type="radio" name="delete1">yes<input type="radio" name="delete1">no</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td><input type="radio" name="delete2">yes<input type="radio" name="delete2">no</td><td>4</td><td>5</td><td>6</td></tr> 
 
    <tr><td><input type="radio" name="delete3">yes<input type="radio" name="delete3">no</td><td>7</td><td>8</td><td>9</td></tr> 
 
    <tr><td><input type="radio" name="delete4">yes<input type="radio" name="delete4">no</td><td>10</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete5">yes<input type="radio" name="delete5">no</td><td>20</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete6">yes<input type="radio" name="delete6">no</td><td>30</td><td>11</td><td>12</td></tr> 
 
</table> 
 
<input type="button" value="remove" onclick="removeItem()">

だけループ範囲に滞在する反対方向に行く（長さは、あなたが行を削除するたびにデクリメントされ）

Answer 3

あなたは、コードの下に使用することができます： -

$("#test").find("td:contains('Yes')").closest('tr').remove(); 

編集1

function removeItem() 
{ 
    $("#test").find("td:contains('Yes')").closest('tr').remove(); 
} 

編集2

それとも、私はあなたのスニペットを更新した

function checkMatch() 
{ 
    $("#test tr.thisRow").each(function() { 
     var thisRow = $(this); 
     var match = thisRow.find(".match"); 

     // note the `==` operator 
     if(match.text() == "yes") { 
      thisRow.hide(); 
      // OR thisRow.remove(); 
     } 
    }); 
} 

Answer 4

を試すことができます。ループ中に行を削除すると、最後の要素からループする必要があります。

function removeItem(){ 
 
    var _table=document.getElementById("test"); 
 
    var len=_table.rows.length 
 
    for(var i=len-1;i > 0;i--){ 
 
     tr=_table.rows[i]; 
 
     if(tr.cells[0].firstChild.checked==true){ 
 
      tr.parentNode.removeChild(tr); 
 
      }  
 
     } 
 
    }

<table id = "test" border=1px;> 
 
    <tr><td>to_remove</td><td>f1</td><td>f2</td><td>f3</td></tr> 
 
    <tr><td><input type="radio" name="delete1">yes<input type="radio" name="delete1">no</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td><input type="radio" name="delete2">yes<input type="radio" name="delete2">no</td><td>4</td><td>5</td><td>6</td></tr> 
 
    <tr><td><input type="radio" name="delete3">yes<input type="radio" name="delete3">no</td><td>7</td><td>8</td><td>9</td></tr> 
 
    <tr><td><input type="radio" name="delete4">yes<input type="radio" name="delete4">no</td><td>10</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete5">yes<input type="radio" name="delete5">no</td><td>20</td><td>11</td><td>12</td></tr> 
 
    <tr><td><input type="radio" name="delete6">yes<input type="radio" name="delete6">no</td><td>30</td><td>11</td><td>12</td></tr> 
 
</table> 
 
<input type="button" value="remove" onclick="removeItem()">

Answer 5

ちょうど別ソリューションhttp://jsfiddle.net/pmankar/Bnuy7/1064/

減少iとlen値が正しくポイントとループに滞在します。

i=i-1; 
len = len - 1;