javascript - 尝试使用 Jquery 删除时未删除子 Div

Question

Clearing child div inside parent div,有很多答案，比如:

 $(".ChildDiv").html("");
 $('.ChildDiv > div').remove();
 $(".ChildDiv").html("");
 $("#ParentDiv").html("");
 $(".ChildDiv div").remove();
 $(".ChildDiv div").empty();
 $('.ChildDiv ').find('div').remove();

可能我已经列出了所有可能的删除 div 的方法，但即使使用了所有这些方法，我仍然无法清除 Parent Div 中的所有 div。让我解释一下我在做什么以及我需要什么。

场景:

我有两个容器 1，其中一个容器有输入搜索框，我可以在其中搜索输入员工姓名并选择几个员工 Ex。 5 并且可以使用“添加”按钮将这些员工移动到另一个容器 2，即“div”。

现在我单击报告按钮事件并在不同的 aspx 中获取这 5 个人的信息，现在如果我返回必须搜索另外 3 名员工的页面，当我再次单击“添加”按钮时，它应该只添加 3 名员工，而不是添加最后搜索的 5 + 3 名员工!!。

所以我在单击“报告”按钮后试图清除该 div 中的 5 名员工，当我使用 alert() 时它说它有 0 个元素，但是当我第二次添加它时，它附加了数据再次，我不需要。这是代码:

要记住的要点: 1.ParentDiv是container-2 2. ChildDiv是ParentDiv里面的child div(当我们点击“添加”按钮选择5名员工时动态追加

代码如下:

HTML:

 <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>

运行报告按钮事件

 <input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
                    onserverclick="RunReport" runat="server" id="Submit1" />

添加按钮点击: 将员工从 container-1 移动到 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'>&times;</Span> </div>");            
    }  
    $('#EmployeeSearchBox').val("").trigger('input');  
});

单击“报告”按钮时，它应该清除 ParentDiv/ChildDiv 中的所有元素，这是我所做的，但它仍然没有清除它，一旦单击“报告”按钮事件，我如何解决/删除这些元素。

这是“报告”按钮事件的示例:

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();
  }

它们都不起作用，我觉得“添加”按钮事件存在问题，它存储数据的地方。

注意:

我不想清除员工列表数组，因为我想再次选择多个员工 Ex。我可以选择 2 名以字母“M”开头的员工，我可以搜索字母“L”的 2 名员工并添加这 2 名员工，容器应在单击“报告”按钮之前容纳 4 名员工。

如果我足够清楚，请告诉我。

控制台日志

Answer 1

我终于能够解决这个问题，我正面临着这个问题，我正在发布答案，现在它正在按我的需要工作。

 $(document).on('click', '#buttonAdd', function (e) {

    var div_count = $('#ParentDiv').find('div').length;
    if (div_count === 0) {
        myHash = []; // Clearing the hash, so that it can add fresh employees, if count == 0 in container- 2.
        $('#EmployeeList :selected').each(function (i, selected) {
            myHash[$(selected).val()] = $(selected).text();
        });
    }
    else { // If there are existing employees in container-2 then append few more. 
        $('#EmployeeList :selected').each(function (i, selected) {
            myHash[$(selected).val()] = $(selected).text();
        });
    }

    var myNode = $("#ParentDiv")[0];
    console.log(myNode);

    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'>&times;</Span> </div>");
        }
    $('#EmployeeSearchBox').val("").trigger('input');
});

我做了什么

由于我应该能够通过搜索追加多个员工，这是在“其他”部分处理的，如果我生成了“报告”，那么我将清除 Container-2。

当我返回页面搜索更多员工时，此时 Container-2 将没有任何员工，所以

var div_count = $('#ParentDiv').find('div').length;
if (div_count === 0) {
 myHash = [];
 //....
 }

将清除允许我添加新员工的数组，因此它解决了我的问题:)

感谢大家的支持。