Jquery-单击按钮将表单上方的元素添加到另一个div

单击button.additem时，我试图将表单上方的div（.item_desc）删除到侧栏。表单的所有处理都将是php/ajax，我只需要一个购物车中的内容的可视化表示，因为页面不会刷新

表格及分区

    <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 To 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>

项目1

项目1说明
添加到购物车

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>

$（文档）.ready（函数（e）{
$（'.additem'）。单击（函数（e）{
$（this）.closest（'.item_desc'）。appendTo（'#边栏'）
});
});

---

不太清楚我做错了什么，我尝试过使用parent（）选择器和其他一些东西。任何帮助或更好的方法都将不胜感激。

最接近的

选择元素最接近的匹配父元素。目标元素是父

表单
元素的同级：

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

您还有其他几个选项，如：

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

还要注意，您应该使用
事件
对象的
.preventDefault（）
方法，或者通过在处理程序中返回falsy值（
return false
）来阻止表单的提交。
我添加了return false，因为单击submit将重新加载页面（导致元素返回到原来的位置）。如果需要提交表单，则需要进行Ajax调用

我还稍微修改了代码

  $('.additem').click(function(e) {
    var $itemDesc = $('.item_desc');
    $('#sidebar').append($itemDesc);
    return false;
  });

这是普朗克：

您可以看到，当您单击按钮时，背景变为红色。这是因为#侧边栏div的内联背景样式为红色，以显示其已被移动
Thank you，按我的要求工作。我很欣赏这两个答案，我还没有完全理解父母/孩子的关系，现在已经很清楚了。祝你有美好的一天。