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
Post a Comment