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

上面的代码将使用< textarea>动态添加div.用户单击任何父节点的子节点时的按钮.按钮的目的是删除它的div(因此它将删除textarea以及带有它的按钮).但我遇到的问题是按钮不会删除它.

另一个是以下代码：
  alert($(this).find(‘textarea [id = txta’coll [1]’]’).text());

应该在textarea中显示文本,但它也不显示.那么如何删除按钮所在的div？

解决方法:

有两个问题,首先他们使用append()方式不正确,它不像字符串连接那样工作.其次,您需要删除父div元素

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" /><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>

来源：http://www.icode9.com/content-1-232251.html