Can We delete own parent coming from jquery in html -


i want remove own block on clicking of cross... not removing , nothing showing in error. please .....

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <style type="text/css">             *{                 margin:0;                 padding:0;                 box-sizing:border-box;             }              .inputfilewrap{                 width:230px;                 position:relative;                 margin:10px 0;             }              .inputfilewrap i{                 position:absolute;                 right:0;                 top:0;                 cursor:pointer;             }              </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  <script type="text/javascript">             $(document).ready(function(e) {                 var upload_element= '<div class="inputfilewrap"><input type="file" /><i class="fa fa-times crossicon"></i></div>';                 $('#addupload').click(function(e) {                     $(this).before(upload_element);                 });                  $('.crossicon').on('click', function(){                     $(this).parent('.inputfilewrap').remove();                 });             });             </script> <div class="inputfilewrap">   <input type="file" /> </div> <a href="javascript:void(0)" id="addupload">add more</a>  

you need use event delegation since dealing dynamic elements

$(document).on('click', '.crossicon', function(){     $(this).parent('.inputfilewrap').remove(); }); 

demo: fiddle


Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -