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()方法的详解点这里