フォーム入力が機能していないのを削除しました

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

はあなたではなく.after()を使用するよりも、コンテンツを保持するために、特定のDIVを作成する必要があります。あなたは.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を修正する必要があります。