如何移除一个动态创建的 div？

Question

我有以下代码，使用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>和按钮的

。该按钮的目的是删除其

（因此它将删除并且也会将按钮一起删除）。但我遇到的问题是该按钮无法删除它。</p> <p>另一个问题是以下代码： <code>alert($(this).find('textarea[id=txta'+coll[1]+']').text());</code></p> <p>应该显示<textarea>中的文本，但它也不行。那么我该如何删除包含该按钮的<div>？</p>

- abba tat

---

$(this).closest('div').remove(); 将会移除该 div。 - user3559349

那么，你尝试的代码不是我展示的那个 :) - 它移除了包围按钮的 div。 - user3559349

@T.J.Crowder，但这正是OP所要求的——“删除其div（这样它将删除文本区域以及与之相关的按钮）”？ - user3559349

@abbatat，我展示的代码只删除了一个div，即包围按钮的那个（假设你添加的html是有效的）。建议您展示一下您动态生成的html的示例。 - user3559349

@StephenMuecke，让我用简短的话重新表述一下问题。当我点击任何子节点时，每个子节点都会添加一个单独的div，其中包含一个文本区域和一个按钮。因此，如果我点击所有四个子节点，它将创建四个div。所以，如果我点击最后一个div的按钮，它应该只删除那个最后的div。 - abba tat

Answer 1

有两个问题，首先您使用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>

- Arun P Johny

---

你的回答更加清晰，所以我已经标记为已回答，但在我获得15个点之前，我无法给分。 - abba tat

Answer 2

尝试这样做：您可以使用closest()找到父div，然后调用remove()方法将其及其子元素删除。

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

- Bhushan Kawadkar