[英]How do i remove a dynamically created 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>
}
當用戶單擊任何父child node
的child node
時,上面的代碼將動態添加帶有<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>
試試這個:你可以使用closest()
找到父div,然后調用remove()
方法來刪除div及其子元素。
$(document).on('click', 'input.del', function () {
var $parentDiv = $(this).closest('div');
$parentDiv.remove();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.