Question

清除父div中的子div，有很多答案，如：

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

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

场景：

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

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

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

要记住的要点： 1. ParentDiv是容器-2 2. ChildDiv是ParentDiv中的子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" />

添加按钮点击： 这将员工从容器1移动到容器-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();
  }

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

注意：

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

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

控制台日志

Answer 1

编辑调整评论：

您需要清除myHash变量。否则，员工将从那里再次添加。

Answer 2

最后我能够解决问题，我正面临着，我正在发布答案，现在它正在我需要的工作。

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

我做了什么

因为我应该能够通过搜索来追加多个员工，这是在＆＃39; else＆＃39;部分，如果我生成＆＃34;报告＆＃34;然后，我正在清理Container-2。

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

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

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

感谢大家的支持。

尝试使用Jquery删除时，不会删除子Div

2 个答案: