javascript - remove an append with click -
this question has answer here:
i have following code: html:
<body> <div> <p class='go'> create </p> <p class='del'> remove </p> </div> </body> css:
.go{ background-color: lime; width:45px; text-align: center; } .bad{ background-color:red; width: 45px; text-align:center; } .del{ background-color:pink; width: 55px; } javascript(jquery)
$(document).ready(function(){ $('.go').click(function(){ $('div').append("<p class='bad'>delete</p>"); }); $('.bad').click(function(){ $(this).remove(); }); $('.del').click(function(){ $('.bad').remove(); }) }); the idea every time clicked "create", add new "delete".
every time clicked "remove", "delete"'s go away, , every time clicked "delete", single delete removed.
all last 1 works. ideas mistake making here?
in situation can't bind jquery click element doesn't exist yet. bind click on $(document).ready(). way around bind delete want element exists when during document ready function.
$('body').on('click', '.bad', function(){ $(this).remove() }) this says, whenever body clicked, if event target has class of .bad, delete it. way, jquery event bound correctly.
working example here: https://jsfiddle.net/xexhdfzw/1/
wiki
Comments
Post a Comment