javascript - jQuery .click() method not behaving as expected -

i wrote function that, on clicking element, replace div hidden span. when had event handler in "onclick=" attr in tag, function worked fine. tried "fancy" , replace onclick attr jquery's .click() method. now, when try use on page, nothing clunk -- nothing happens.

however, if execute exact same code in chrome's js console, works great. here js:

$("a#delete").click(function () {     $("a#delete").replacewith($("span.hconf").attr("style", "none")) }); 

here relevant html (the inside div, outside):

<a class='modify' id="delete" u="{{ i.id }}" href='#'>delete</a> <span class='hconf' style="display:none;">are sure? <a class='confirm' id='del_conf_true' onclick='deltrue();' href='#'>yes</a> | <a class='confirm' id='del_conf_false' href='#'>no</a></span> 

i know can change second $("a#delete") "this" keyword, leaving undone i'm not sure if that's part of problem. newcomer js/jquery.

ready it:

$(document).ready(function() {     $("a#delete").click(function () {         $(this).replacewith($("span.hconf").attr("style", "display:none"));     }); }); 

...and don't mean style="display:none"? can use .hide():

$("span.hconf").hide(); 

and lastly, pointless using filtering tag on id selector. $("#delete"), both shorter , quicker.