如何删除动态创建的div？

Question

i have a the following code to load a treeview with data using jstree plugin and plugin was attached to index view of 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>

    }

the above code will dynamically add divs with <textarea> and a button when the user clicks a child node of any parent. The purpose of the button is to delete its div ( so it will remove the textarea and also button with it). But the problem i have is the button does not delete it.

another is the following code: alert($(this).find('textarea[id=txta'+coll[1]+']').text());

should display the text in the textarea but it does not either. So how do i remove the div the button is in?

Answer 1

There are 2 problems, first they way you have used append() is not proper, it doesn't work like string concatenation. Second you need to delete the parent div element

 $(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> 

Answer 2

Try this :You can find the parent div using closest() and then call remove() method on it to remove the div and its child elements.

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