[英]How to delete content after closing the jquery ui dialog
在我的項目中,我使用jquery ui對話框。
在send_div關閉之前,staff_div具有John-Stack,而sltStfId具有Robert-Sansa。 在send_div關閉之后,我想刪除“ John-Stack”和“ Robert-Sansa”的內容。 因此,在初始化send_div對話框時,我選擇beforeclose參數。
這是js代碼:
<script>
$(document).ready(function()
{
$('#transmit_app').click(function(){
$('#transmit_div').dialog("open");
$('#transmit_div').dialog("option","title");
});
});
$('#transmit_div').dialog({
autoOpen:false,
title:"selectUser",
modal:true,
height:500,
width:600,
show:{effect:"blind",duration: 1000},
hide:{effect:"explode",duration: 1000},
beforeclose: function() {
staff_div.innerHTML="<input type='button' id='selAllButton' value='selectAll'><br />";
sltStfId.innerHTML="";
}
});
</script>
這是html代碼:
<input type="button" id="transmit_app" value="trsmit" />
<div id="transmit_div" >
<div id="staff_div" class="staff" >
<input type="button" id="selAllButton" value="selectAll"><br />
John-Stack
</div>
<div class="selected_staff" >
<input type="button" onclick="delete_allStaff()" value="deleteAll">
<div id="sltStfId">
Robert-Sansa
</div>
</div>
</div>
但是不幸的是,它失敗了。我選中了send_div對話框,然后再次打開它。 “ John-Stack”和“ Robert-Sansa”仍然存在。
誰能幫我?
您可能想要您的這段代碼。 希望能幫助到你。
<script>
$(document).ready(function(){
$('#transmit_app').click(function(){
$('#transmit_div').dialog("open");
$('#transmit_div').dialog("option","title");
});
$('#transmit_div').dialog({
autoOpen:false,
title:"selectUser",
modal:true,
height:500,
width:600,
show:{effect:"blind",duration: 1000},
hide:{effect:"explode",duration: 1000},
beforeClose: function myCloseDialog() {
$('#staff_div').html("<input type='button' id='selAllButton' value='selectAll'><br />");
$('#sltStfId').html("");
}
});
});
</script>
$(document).ready(function() { $('#transmit_app').click(function(){ $('#transmit_div').dialog("open"); $('#transmit_div').dialog("option","title"); }); $("#delete").click(function(){ $("#sltStfId,#staff_div").remove(); }) }); $('#transmit_div').dialog({ autoOpen:false, title:"selectUser", modal:true, height:500, width:600, show:{effect:"blind",duration: 1000}, hide:{effect:"explode",duration: 1000}, beforeclose: function() { staff_div.innerHTML="<input type='button' id='selAllButton' value='selectAll'><br />"; sltStfId.innerHTML=""; } });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="button" id="transmit_app" value="trsmit" /> <div id="transmit_div" > <input type="button" id="selAllButton" value="selectAll"><br /> <div id="staff_div" class="staff" > John-Stack </div> <div class="selected_staff" > <input type="button" value="deleteAll" id="delete"> <div id="sltStfId"> Robert-Sansa </div> </div> </div>
您要使用close
事件功能,而不要使用beforeclose
事件。
另外,您還希望將容器div定位為empty()
包含在其中的所有元素。
$("#transmit_div").empty();
$(document).ready(function() { $('#transmit_app').click(function() { $('#transmit_div').dialog("open"); $('#transmit_div').dialog("option", "title"); }); }); $('#transmit_div').dialog({ autoOpen: false, title: "selectUser", modal: true, height: 500, width: 600, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, close: function() { deleteAll(); } }); $("#delete-all").on("click", function() { deleteAll(); }); function deleteAll() { $("#transmit_div").empty(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <input type="button" id="transmit_app" value="trsmit" /> <div id="transmit_div"> <div id="staff_div" class="staff"> <input type="button" id="selAllButton" value="selectAll"><br /> John-Stack </div> <div class="selected_staff"> <input id="delete-all" type="button" value="deleteAll"> <div id="sltStfId"> Robert-Sansa </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.