Question

在添加其他子项之前，我正在尝试删除结构中的所有子节点。

我在这里阅读jQuery empty() callback not being fired我可以-3然后我的代码到底。

所以我在这里转载了我的用例

.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> </span> <input class="saveModif" type="button" value="Save" /> <input class="cancelModif" type="button" value="Cancel" /> </label> </form> </div> </div>我的$("#labelEnv").empty()已添加，那么在添加之前我应该如何将我的代码修改为空？

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>

为什么我不能在JQuery .empty（）之后添加代码？

1 个答案: