JQueryの後にコードを追加できないのはなぜですか？

Question

私は他の子を追加する前に、私の構造体のすべての子ノードを削除しようとしています。

私はここでjQuery empty() callback not being firedを読むことができました.empty()と私のコードは、下にあります。あなたが$("#labelEnv").empty()私inputをコメントしている場合

は、だからここに私は私のユースケース

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

を再現追加されるので、どのように私は追加する前に空にし、私のコードを変更する必要がありますか？

Answer 1

動作は、が#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>