Trying to remove child divs inside a parent div? There are several methods, such as:
$(".ChildDiv").html("");
$('.ChildDiv > div').remove();
$(".ChildDiv").html("");
$("#ParentDiv").html("");
$(".ChildDiv div").remove();
$(".ChildDiv div").empty();
$('.ChildDiv ').find('div').remove();
I have listed all possible ways to remove the divs, but I am still unable to clear all the divs inside the Parent Div. Let me explain my situation.
Scenario :
I have two containers - container-1 with an input search box where I can search for employee names and select a few employees (e.g., 5). By clicking the "Add" button, I can move these selected employees to another container-2 which is a 'div'.
https://i.sstatic.net/Sbsjb.jpg
When I click on the report button event to get information about those 5 people in separate ASPX pages, then return to the page to search for more employees, it adds the last searched group of 5 employees to the new selection of 3 employees instead of just adding the new 3 employees.
https://i.sstatic.net/ZI80N.jpg
https://i.sstatic.net/kS6Uo.jpg
To prevent this, I am trying to clear the previous 5 employees from that div after clicking the "Report" button. Even though the alert says there are 0 elements, when I add the data again, it appends the previous set along with the new one, which is undesired behavior. Here is my code:
Things to keep in mind: 1. ParentDiv is container-2 2. ChildDiv is the dynamically appended child div inside ParentDiv when selecting 5 employees on "Add" button click
Here is the HTML code:
<table id="topTable">
<tr>
<td id="leftpane">
<h4>Search for Employee by Name or Profile:</h4>
<input type="text" id="EmployeeSearchBox" class="search-box" aria-multiselectable="true" />
<select id="EmployeeList" size="20" multiple></select>
</td>
<td id="centerpane">
<div> <input type="button" value="Add >>" class="AddButton" id="buttonAdd" /></div>
<div> <input type="button" value="Add All >>" class="AddButton" id="buttonAddAll" /></div>
</td>
<td id="rightpane">
<h4>Selected Employees:</h4>
<div id="ParentDiv"></div>
</td>
</tr>
</table>
Run Report button event
<input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
onserverclick="RunReport" runat="server" id="Submit1" />
Add Button Click : which moves the employees from container-1 to container-2.
$(document).on('click', '#buttonAdd', function (e) {
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
var myNode = $("#ParentDiv")[0];
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var emp_id in myHash) {
var emp = $("#ParentDiv").append("<div class= ChildDiv id=" + emp_id + ">" + myHash[emp_id] + " <span class='close'>×</Span> </div>");
}
$('#EmployeeSearchBox').val("").trigger('input');
});
Even though I've tried clearing the elements from ParentDiv/ChildDiv upon clicking the "Report" button, they are not being removed. How can I fix this issue?
This is a sample of the "Report" button event code:
function FormValidate() {//Part of my other code
$(".ChildDiv").html("");
$('.ChildDiv > div').remove();
$(".ChildDiv").html("");
$("#ParentDiv").html("");
$(".ChildDiv div").remove();
$(".ChildDiv div").empty();
$('.ChildDiv ').find('div').remove();
}
None of these methods seem to be working. It appears there may be an issue with the "Add" button event where the data is being stored improperly.
NOTE :
I want to avoid clearing the array of employee lists so that I can select multiple employees repeatedly. For example, I could select 2 employees starting with the letter "M," followed by 2 employees with the letter "L," and so forth. The container should retain all selected employees before the "Report" button is clicked.
Let me know if this explanation is clear enough.
Console Log