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

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -