Javascript 如何删除动态创建的div？

我有以下代码，可以使用jstree插件加载带有数据的树视图，该插件被附加到MVC4的索引视图

<div id="jstree_demo_div">
    <ul>
        <li class="jstree-closed">Root node 1
            <ul>
                <li class="c1">child1</li>
                <li class="c1">child2</li>
            </ul>
        </li>
        <li class="jstree-closed">Root node 2
            <ul>
                 <li class="c1">child3</li>
                 <li class="c1">child4</li>

           </ul>
        </li>
  </ul> 
</div>

<div id="Divtxt1"></div>
<h2>Index</h2>
@section Scripts{
    <script src="Scripts/jstree.min.js"></script>
    <script> 
       $(document).ready(function () {//{ "theme": { "icons": true }
           $('#jstree_demo_div').jstree();

           $(document).on('click', '.c1', function () {
               var nodeText = $(this).text();
               //alert(nodeText);
               $('#Divtxt1').append('<div style="display:inline-block;border:1px solid black" ' + 'id=' + nodeText + '>' +
                   '<textarea style=width:100px;height:100px;visibility:visible;' + 'id=txta' + nodeText + '>' + nodeText +
                   ':</textarea>')
               .append('<input type="button" class="del" value="Del"' + 'id=' +'btn-' + nodeText + ' />')
               .append('</div><br />');
           });

           $(document).on('click', '.del', function () {
               var btnId = $(this).attr('id');
               var coll = btnId.split('-');
               alert(coll[1]);
               //alert( $(this).attr('id') )
               alert($(this).find('textarea[id=txta'+coll[1]+']').text());
               alert( $(this).closest('div').html() );
           });
        });
    </script>

    }

根节点1

儿童1
儿童2


根节点2

儿童3
儿童4



指数
@节脚本{
$（document）.ready（函数（）{/{“主题”：{“图标”：true}
$（'#jstree_demo_div'）.jstree（）；
$（文档）.on（'单击'，'.c1'，函数（）{
var nodeText=$（this.text（）；
//警报（nodeText）；
$（'#Divtxt1'）。附加（''+
''+nodeText+
':')
.append（“”）
.append（“
”）；
});
$（文档）.on（'单击'，'.del'，函数（）{
var btnId=$（this.attr（'id'）；
var coll=btnId.split（'-'）；
警报（coll[1]）；
//警报（$（this.attr（'id'））
警报（$（this）.find（'textarea[id=txta'+coll[1]+']）.text（））；
警报（$（this.closest（'div'）.html（））；
});
});
}

上面的代码将动态添加带有

的div和一个按钮，当用户单击任何父节点的

子节点时。该按钮的目的是删除其
div
（因此它将删除textarea和按钮）。但我遇到的问题是按钮没有删除它

另一个是以下代码：
alert（$（this）.find（'textarea[id=txta'+coll[1]+']）.text（）；

应该在textarea中显示文本，但它也不显示。那么如何删除按钮所在的div？
尝试以下操作：可以使用
最近的（）找到父div
，然后对其调用
删除（）
方法以删除div及其子元素

$(document).on('click', 'input.del', function () {
     var $parentDiv = $(this).closest('div');  
     $parentDiv.remove();   
});

有两个问题，第一个问题是您使用
append（）
的方式不正确，它不像字符串连接那样工作。第二个问题是您需要删除父
div
元素


$（document）.ready（函数（）{/{“主题”：{“图标”：true}
$（'#jstree_demo_div'）.jstree（）；
$（文档）.on（'单击'，'.c1'，函数（）{
var nodeText=$（this.text（）；
//警报（nodeText）；
var html=''+'+nodeText+'：'+'
；
$（'#Divtxt1'）.append（html）；
});
$（文档）.on（'单击'，'.del'，函数（）{
$（this）.closest（'div'）.remove（）；
});
})；


根节点1

儿童1
儿童2


根节点2

儿童3
儿童4



索引
$（this）.closest（'div'）.remove（）；
将删除div@StephenMuecke根据我用这段代码删除整个divs集合的尝试，假设添加了三个div，当我单击最后一个div时，当我使用此代码警报（$（this.closest（'div'）.html（）时，它将进一步删除所有div；它将显示所有div
警报（$（this）.closest（'div'）.find（'textarea'）.val（））；
警报textarea@abbatat这不是你想要删除div的原因吗？然后@Stephen的评论回答了这个问题question@abbatat：否，Stephen的代码将只删除与此

this最近的祖先元素的单个div（当然还有它的内容）。不是所有的div。你的答案更清楚一点，所以我已经标记为已回答，但在得到大约15分之前我不能打分