为什么不清除我的div？ （Javascript＆amp; Jquery）

Question

点击按钮时会触发testResults()功能。它会创建div s。我希望每次单击按钮时都清除#parent div。但它只在你第一次点击时才这样做。第二次点击#parent div时，系统不会清除div，只会附加新的// DECLARATIONS var searchActive = false, emailAddresses = [], firstName, lastName, domainName; // MAIN FUNCTION function testResults (form) { // TRYING TO DELETE INNERHTML EVERYTIME SOMEONE CLICKS // VARIANT 1 --> NOT WORKING document.getElementById("parent").innerHTML = ""; // VARIANT 2 --> NOT WORKING $( "#parent" ).html(""); // VARIANT 3 --> NOT WORKING ASWELL var div = document.getElementById('parent'); while(div.firstChild){ div.removeChild(div.firstChild); } // CHECK IF ALL FIELDS ARE FILLED IN (INCOMPLETE) if (!form.firstName.value) { alert("Bitte fülle alle Felder aus!"); } if (! form.lastName.value) { alert("Bitte fülle alle Felder aus!"); } if (! form.domainName.value) { alert("Bitte fülle alle Felder aus!"); } // SAVE VALUES FROM THE FIELDS firstName = form.firstName.value; lastName = form.lastName.value; domainName = form.domainName.value; // STRING MODIFICATIONS firstName = firstName.toLowerCase(); firstName = firstName.replace(/ä/g,"ae").replace(/ö/g,"oe").replace(/ü/g,"ue"); lastName = lastName.toLowerCase(); lastName = lastName.replace(/ä/g,"ae").replace(/ö/g,"oe").replace(/ü/g,"ue").replace(/ß/g,"ss"); // ADD ADDRESSES TO ARRAY emailAddresses.push(firstName + "." + lastName + "@" + domainName); emailAddresses.push(firstName + "@" + domainName); // ITERATE OVER ARRAY, CREATE A DIV FOR EACH EMAILADDRESS for (i = 0; i < emailAddresses.length; i++) { $( "#parent" ).append( "<div class='alert alert-info'>" + emailAddresses[i] + "</div>"); } } 。

这是我的代码：

{{1}}

为什么即使我尝试了3种不同的变体，它也没有清除#parent div？控制台也是空的。

jsfiddle链接：http://jsfiddle.net/zdeahcqc/

Answer 1

您没有清除阵列。 emailAddresses = [];它工作得很好http://jsfiddle.net/zdeahcqc/5/

        function testResults (form) {
 emailAddresses = [];

Answer 2

div 被清除。

但是每次提交表单时你都没有重置emailAddresses数组，因此emailAddresses列表会越来越长（首先它包含2封电子邮件，然后是4封，然后是6封） - 您将所有这些电子邮件地址附加到div。

只需在功能开头添加emailAddresses = []即可。

工作：http://jsfiddle.net/zdeahcqc/6/

Answer 3

使用empty()功能 - 请参阅http://api.jquery.com/empty/。

其次，您需要重置用于跟踪值的emailAddress数组。在最后一个循环中，它使用以前的值。

此外，您不需要使用3个单独的if语句来指示所有字段都是必需的，一个检查覆盖所有这些字段就足够了。

尝试以下

function testResults (form) {
    $("#parent").empty(); // Clear all existing entries
    emailAddresses = []; // Empty the array

    // CHECK IF ALL FIELDS ARE FILLED IN (INCOMPLETE)
    if (! form.firstName.value || form.lastName.value || form.domainName.value) {alert("Bitte fülle alle Felder aus!"); return false;}

    // SAVE VALUES FROM THE FIELDS
    firstName = form.firstName.value;
    lastName = form.lastName.value;
    domainName = form.domainName.value;

    // STRING MODIFICATIONS
    firstName = firstName.toLowerCase();
    firstName = firstName.replace(/ä/g,"ae").replace(/ö/g,"oe").replace(/ü/g,"ue");

    lastName = lastName.toLowerCase();  
    lastName = lastName.replace(/ä/g,"ae").replace(/ö/g,"oe").replace(/ü/g,"ue").replace(/ß/g,"ss");


    // ADD ADDRESSES TO ARRAY
    emailAddresses.push(firstName + "." + lastName + "@" + domainName);
    emailAddresses.push(firstName + "@" + domainName);


    // ITERATE OVER ARRAY, CREATE A DIV FOR EACH EMAILADDRESS
    for (i = 0; i < emailAddresses.length; i++) { 
        $( "#parent" ).append( "<div class='alert alert-info'>" + emailAddresses[i] + "</div>");
    }
}