How to remove dynamically created div?

Question

I have the following code to load a tree with data using the jstree plugin, and the plugin was attached to the MVC4 index view

<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 on child nodeany parent. The purpose of the button is to remove it div(so that it removes the text field, as well as the button with it). But the problem is that the button does not delete it.

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

should display text in a text box, but it also does not display. So how do I remove the div the button is on?

Answer 1

2 , , 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>

Hide result

Answer 2

: div closest(), remove() , div .

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