删除无效的表单输入

Question

我在更改选择输入选项时从表单中删除元素时遇到问题。当选择输入被置于“手动指定”时，javascript正确地添加到表单中，如我所料。当该选项再次更改为“手动指定我希望它删除以前添加的表单输入，但似乎无法使其工作。

$(function() { /* DOM ready */
  $("#distanceSelect").change(function() {
    if ($(this).val() == "Manually Specify") {
      var html = $("#distanceSpecifyInput").html();
      $("#distanceSelectInput").after(html);
    } else {
      var child = document.getElementById("distanceSpecifyInput");
      if (child) {
        child.parentNode.removeChild(child);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
    <div class="form-group row" id="distanceSelectInput">
      <div class="col-sm-3">
        <label for="distanceSelect" class="control-label">Distance:</label>
        <select class="form-control" id="distanceSelect">
              <option>5km</option>
              <option>10km</option>
              <option>Half Marathon</option>
              <option>Marathon</option>
              <option>Manually Specify</option>
            </select>
      </div>
    </div>

    <div class="hide" id="distanceSpecifyInput">
      <div class="form-group row">
        <div class="col-sm-1">
          <input type="number" class="form-control" step="0.1" id="distance">
        </div>
        <div class="col-sm-2">
          <select class="form-control" name="distanceFormat" id="distanceFormat">
                <option>miles</option>
                <option>km</option>
                <option>meters</option>
              </select>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-12">
        <label for="hours" class="control-label">Desired Finish Time:</label>
      </div>
      <div class="col-sm-1">
        <input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
      </div>
      <div class="col-sm-1">
        <input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
      </div>
      <div class="col-sm-1">
        <input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
      </div>
    </div>

    <div class="form-group">
      <button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
    </div>

  </form>
</div>

感谢您的帮助。

Answer 1

您应该创建一个特定的DIV来保存内容，而不是使用.after()。这样您就可以使用.empty()清除它。

$(function() { /* DOM ready */
  $("#distanceSelect").change(function() {
    if ($(this).val() == "Manually Specify") {
      var html = $("#distanceSpecifyInput").html();
      $("#distanceOutput").html(html);
    } else {
      $("#distanceOutput").empty();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
    <div class="form-group row" id="distanceSelectInput">
      <div class="col-sm-3">
        <label for="distanceSelect" class="control-label">Distance:</label>
        <select class="form-control" id="distanceSelect">
              <option>5km</option>
              <option>10km</option>
              <option>Half Marathon</option>
              <option>Marathon</option>
              <option>Manually Specify</option>
            </select>
      </div>
    </div>

    <div class="hide" id="distanceSpecifyInput">
      <div class="form-group row">
        <div class="col-sm-1">
          <input type="number" class="form-control" step="0.1" id="distance">
        </div>
        <div class="col-sm-2">
          <select class="form-control" name="distanceFormat" id="distanceFormat">
                <option>miles</option>
                <option>km</option>
                <option>meters</option>
              </select>
        </div>
      </div>
    </div>
    
    <div id="distanceOutput">
    </div>

    <div class="form-group row">
      <div class="col-sm-12">
        <label for="hours" class="control-label">Desired Finish Time:</label>
      </div>
      <div class="col-sm-1">
        <input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
      </div>
      <div class="col-sm-1">
        <input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
      </div>
      <div class="col-sm-1">
        <input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
      </div>
    </div>

    <div class="form-group">
      <button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
    </div>

  </form>
</div>

请注意，像这样复制HTML会导致重复的ID distance和distanceFormat。 ID应该是唯一的，因此您应该在复制后修复ID。