ifステートメントの停止機能

Question

ユーザーが削除ボタンをクリックしたときにテーブルの行を削除する機能があります。 2行しか残っていない場合（ヘッダーと入力行）、ユーザーが削除できるようにしたくありません。私はリターン（偽）を試みました。とexit（）;どちらも働かない。私はアラートを取得しますが、行はとにかく削除されます。

I持って下に次のjQueryの機能：

function deleteLine() { 
    var $rowcount = $("#desc_table tr").length; 
    if ($rowcount <= 2) { 
    alert("Cannot remove all the description lines."); 
    return (false); 
    } else { 
    $("#desc_table").on('click', '.btnDelete', function() { 
     $(this).closest('tr').remove(); 
    }); 
    } 
} 

わからないあなたはこれを必要とするが、ここに私のhtmlの一部である場合：

<tr> 
    <td><input name="desc1" type="text"></td> 
    <td> <input name="desc_hr1" type="text"></td> 
    <td> <input name="desc_rt1" type="text"></td> 
    <td><input name="desc_amt1" type="text"></td> 
    <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine()"></td> 
</tr> 
<tr> 
    <td><input name="desc2" type="text"></td> 
    <td> <input name="desc_hr2" type="text"></td> 
    <td> <input name="desc_rt2" type="text"></td> 
    <td><input name="desc_amt2" type="text"></td> 
    <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine()"></td> 
</tr> 
<tr> 
    <td><input name="desc3" type="text"></td> 
    <td> <input name="desc_hr3" type="text"></td> 
    <td> <input name="desc_rt3" type="text"></td> 
    <td><input name="desc_amt3" type="text"></td> 
    <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine()"></td> 
</tr>     

Answer 1

この行は、すべての行にイベントハンドラを追加しますその短絡はあなたのチェックを短絡させます：

$("#desc_table").on('click','.btnDelete',function() { 
    $(this).closest('tr').remove(); 
}); 

これで、彼らはすべて今すぐ行

あなたがして入力への参照を追加することができます。

<input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"> 

そして行を削除するためにそれを使用します。もちろん

function deleteLine(e){ 
    var $rowcount = $("#desc_table tr").length; 
    if($rowcount <= 2){ 
     alert("Cannot remove all the description lines."); 
     return ; 
    } 
    else{ 
     e.closest('tr').remove(); 
    } 
} 

、他の方法もあります - 重要なことは、すべての行に新しいクリックハンドラを追加しないようにすることです。

Answer 2

onclick属性は不要です。クリックハンドラを委任し、そこにチェックを入れてください。

$("#desc_table").on('click', '.btnDelete', function() { 
 
    var $rowcount = $("#desc_table tr").length; 
 
    if ($rowcount <= 2) { 
 
    alert("Cannot remove all the description lines."); 
 
    return (false); 
 
    } else { 
 
    $(this).closest('tr').remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="desc_table"> 
 
    <tr> 
 
    <td><input name="desc1" type="text"></td> 
 
    <td> <input name="desc_hr1" type="text"></td> 
 
    <td> <input name="desc_rt1" type="text"></td> 
 
    <td><input name="desc_amt1" type="text"></td> 
 
    <td><input type="button" value="X" name="delete" class="btnDelete" ></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input name="desc2" type="text"></td> 
 
    <td> <input name="desc_hr2" type="text"></td> 
 
    <td> <input name="desc_rt2" type="text"></td> 
 
    <td><input name="desc_amt2" type="text"></td> 
 
    <td><input type="button" value="X" name="delete" class="btnDelete"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input name="desc3" type="text"></td> 
 
    <td> <input name="desc_hr3" type="text"></td> 
 
    <td> <input name="desc_rt3" type="text"></td> 
 
    <td><input name="desc_amt3" type="text"></td> 
 
    <td><input type="button" value="X" name="delete" class="btnDelete"></td> 
 
    </tr> 
 
</table>