Как удалить динамически созданный div?

Question

у меня есть следующий код для загрузки TreeView с данными, используя 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> и кнопку, когда пользователь нажимает child node любого родителя. Целью кнопки является удаление ее div (так что она удалит текстовое поле, а также кнопку с ним). Но проблема в том, что кнопка не удаляет ее.

другой является следующим кодом: alert($(this).find('textarea[id=txta'+coll[1]+']').text());

должен отображать текст в текстовом поле, но это не делает ни. Итак, как мне удалить div, в котором находится кнопка?

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>

Answer 2

Попробуйте следующее: вы можете найти родительский div, используя closest(), а затем вызвать метод remove(), чтобы удалить div и его дочерние элементы.

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