爲什麼我不能在JQuery .empty（）之後添加代碼？

Question

我想在添加其他孩子之前刪除我的結構的所有子節點。

我已經在這裏閱讀jQuery empty() callback not being fired我可以做.empty()然後我的代碼到底部。

所以我在這裏轉載我的使用情況

//document.getElementById("labelEnv").innerHTML =""; 
 

 
$("#labelEnv").empty() 
 

 
$("<input type='text' class='input-field env' value='I wont be added'/>").insertBefore($('.addEnv'));

.form-style-2{ 
 
    max-width: 600px; 
 
    padding: 10px 10px 2px 10px; 
 
    font: 13px Arial, Helvetica, sans-serif; 
 
    background: rgba(blue, 0.8); 
 
} 
 
.form-style-2-heading{ 
 
    color:black; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    border-bottom: 2px solid #ddd; 
 
    margin-bottom: 20px; 
 
    font-size: 15px; 
 
    padding-bottom: 3px; 
 
} 
 
.form-style-2 label{ 
 
    display:table; 
 
    width: 100%; 
 
    font-size: 15px; 
 
} 
 

 
.form-style-2 label > span{ 
 
    color: black; 
 
    font-weight: bold; 
 
    padding-right: 5px; 
 
    width:25%; 
 
    display: table-cell; 
 
} 
 
.form-style-2 span.required{ 
 
    color:red; 
 
} 
 

 
.form-style-2 a{ 
 
    display: block; 
 
} 
 
.form-style-2 input.input-field { 
 
    border: 1px solid #c2c2c2; 
 
    border-radius: 3px; 
 
    box-sizing: border-box; 
 
    display: table-cell; 
 
    margin: 4px; 
 
    outline: medium none; 
 
    padding: 7px; 
 
    width: 31%; 
 
} 
 
.form-style-2 input.env, input.vol{ 
 
    width: 100% !important; 
 
} 
 
.form-style-2 input.nameModif{ 
 
    width: 50% !important; 
 
} 
 

 

 
.form-style-2 .input-field:focus{ 
 
    border: 1px solid #0C0; 
 
} 
 
.form-style-2 input.saveModif{ 
 
    border: none; 
 
    padding: 5px 5px 5px 5px; 
 
    background: green; 
 
    color: #fff; 
 
    box-shadow: 1px 1px 4px #DADADA; 
 
    border-radius: 3px; 
 
} 
 
.form-style-2 input.saveModif:hover{ 
 
    background: green; 
 
    color: #fff; 
 
} 
 

 
.form-style-2 input.cancelModif{ 
 
    border: none; 
 
    padding: 5px 5px 5px 5px; 
 
    background: red; 
 
    color: #fff; 
 
    box-shadow: 1px 1px 4px #DADADA; 
 
    border-radius: 3px; 
 
} 
 
.form-style-2 input.cancelModif:hover{ 
 
    background: red; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divCodeContainer"> 
 
     <div class="form-style-2"> 
 
      <div class="form-style-2-heading"></div> 
 
      <form action="" method="post"> 
 
      <label> 
 
       <span>Container name 
 
       <span class="required">*</span> 
 
       </span> 
 
       <input type="text" class="input-field nameModif" value="" /> 
 
      </label> 
 
      <label id="labelEnv"> 
 
       <span>Environment 
 
       </span> 
 
       <input type="text" class="input-field env" value="replace me" /> 
 
       <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a> 
 
      </label> 
 
      <label id="labelVol"> 
 
       <span>Volumes 
 
       </span> 
 
       <input type="text" class="input-field vol" value="replace me" /> 
 
       <a class="addVol" aria-expanded="false"><i class="fa fa-plus"></i></a> 
 
      </label> 
 
      <label> 
 
       <span>&nbsp;</span> 
 
       <input class="saveModif" type="button" value="Save" /> 
 
       <input class="cancelModif" type="button" value="Cancel" /> 
 
      </label> 
 
     </form> 
 
     </div> 
 
    </div>

如果評論中$("#labelEnv").empty()我input添加，所以我應該怎麼修改我的代碼加入之前是空的？

Answer 1

行爲是預期的，因爲元素.addEnv是#labelEnv的子元素，所以一旦您使用.empty()元素不存在，則它不會被插入。

$("#labelEnv :not(.addEnv)").remove(); 
 
$("<input type='text' class='input-field env' value='I wont be added'/>").insertBefore($('.addEnv'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<label id="labelEnv"> 
 
       <span>Environment    </span> 
 
       <input type="text" class="input-field env" value="replace me" /> 
 
       <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a> 
 
    </label>