Jquery - adding element above form to another div on button click -

Jquery - adding element above form to another div on button click -

i trying remove div (.item_desc) above form sidebar when button.additem clicked. of processing of form php/ajax, need visual representation of whats going in cart page wont refreshing.

form , divs

<div class="item"> <div class="item_desc"> item 1<br> item 1 desc </div> <form method="post"> <button type="submit" name="submit" class="additem">add cart</button> <input type="hidden" name="id" value=""> <input type="hidden" name="name" value=""> <input type="hidden" name="qty" value=""> <input type="hidden" name="desc" value=""> <input type="hidden" name="price" value=""> <input type="hidden" name="img" value=""> </form> </div>

jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(e) { $('.additem').click(function(e) { $(this).closest('.item_desc').appendto('#sidebar') }); }); </script>

can't quite work out doing wrong, have tried using parent() selector , few other things. help or improve way of doing appreciated.

closest selects closest matching parent of element. target element sibling of parent form element:

$(this).closest('form') // closest parent form element .siblings('.item_desc') // sibling of form element .appendto('#sidebar');

you have several other options like:

$(this).closest('.item') // closest `.item` parent/ancestor .children('.item_desc') // `.item_desc` children .appendto('#sidebar');

also note should prevent submission of form either using .preventdefault() method of event object or returning falsy value(return false) in handler.

jquery