JS 添加和刪除HTML 標簽

//添加一行價格
$('#add_ladder_price').click(function(){
    var trHTML = '<tr align="center" class="tr_ladder_price">' +
        '<td><input style="text-align: center" type="text" name="purchases" value=""/></td> ' +
        '<td><input style="text-align: center" type="text" name="price_cn" value=""/></td> ' +
        '<td><input style="text-align: center" type="text" name="price_us" value=""/></td> ' +
        '<td><img src="" width="20px" height="20px" class="cls_delete_ladder_price"></td>';
    $('#tbody_ladder_price').append(trHTML);
    // alert("添加價格");
})

//刪除一行價格 只對靜態加載的標簽綁定了該事件  動態綁定需要用on()方法綁定
//$('.cls_delete_ladder_price').click(function(){
//    alert("刪除價格");
//    $(this).parent().parent().remove();
//})

//刪除一行價格   包含動態添加的
$(document).on("click",".cls_delete_ladder_price",function(){
    alert("刪除價格");
    $(this).parent().parent().remove();
});

on()方法如下

$(selector).on(event,childSelector,data,function,map)

****************************刪除的這個試了好多次，只有以上這個好用了。。。還不知道為什么，我將selector指定為要綁定事件的父級標簽是不可以的，點擊后會走不進來。。
但是總覺得將selector指定為document太大了，不太合適。有知道的大神還望不吝賜教。多謝。

　　給出一個jQuery.on()方法的詳解點這里