JS Add and remove HTML tags

Add a line Price $ (' #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> "+< c2/> ' <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 ></td> ";    $ (' #tbody_ladder_price '). Append (trhtml);    Alert ("Add Price");})

Delete a row price binds only statically loaded tags the event  dynamic binding needs to be bound with the On () method
$ ('. Cls_delete_ladder_price '). Click (function () {
    alert ("Delete price");
$ (this). Parent (). Parent ()    . Remove ();
//})

Delete a row price   contains dynamically added
$ (document). On ("click", ". Cls_delete_ladder_price", function () {
    Alert ("Delete price");
    $ (this). Parent (). Parent (). remove ();
});

The On () method is as follows

$ (selector). On (Event,childselector,data,function,map)

The deletion of this tried many times, only the above this easy to use ... Do not know why, I will selector specified as the parent tag to bind the event is not possible, click will not go in.
But I always feel that it is too big to designate selector as document, which is not appropriate. The great God who knows is also looking for the generous enlighten. Thanks a lot.

Give a detailed point of the Jquery.on () method here

JS Add and remove HTML tags