JQueryでテキストフィールドを削除する

Question

jQueryでテキストボックスフィールドを追加して削除しましたが、add関数はうまくいきましたが、remove関数が問題を引き起こしています。フィールドを追加した後は削除できません。私はその背後にあるエラーを検出しようとしましたが、何も見つけられませんでした。

私が間違っていた場所を検出するために、私は新鮮な目が必要です。

<script> 
 

 
$(document).ready(function() { 
 

 
    // Variables 
 
    var hello = '<div id="p"><div class="row"><div id="p" class="col-md-4"><input type="text" name="make" class="form-control"></div><div class="col-md-3"><input type="text" name="make" class="form-control"></div><div class="col-md-2"><input type="text" name="model" class="form-control"></div><div class="col-md-2"><input type="text" name ="serial" class="form-control"></div><div class="col-md-1"><span id="remove" class="btn btn-xs btn-danger"><b> - </b></span></div><br><br></div></div>'; 
 
\t 
 
    // Add rows to the form 
 
    $("#add").click(function() { 
 
    $("#fields").append(hello); \t 
 
    }); 
 
\t 
 
    // Remove rows from the form 
 
    $("#fields").on('click', '#remove', function() { 
 
    $(this).parent('#p').remove(); \t 
 
    }); 
 
\t \t \t 
 
    // Populate values from the first row 
 
\t 
 
}); 
 

 
</script>

<div class="container"> 
 
    <div class="row" style="padding-top: 7%;" > 
 
     <div class="col-md-offset-1 col-sm-offset-2 col-md-10 col-sm-8"> 
 
      <div class="card"> 
 
       <div class="card-body"> 
 
        <form class="form" role="form"> 
 
         <div class="form-group floating-label"> 
 
          <input readonly type="text" class="form-control input-lg" id="large4" > 
 
          <label for="large4">Request Title</label> 
 
         </div> 
 
         <div class="form-group floating-label"> 
 
          <input readonly type="text" class="form-control input-lg" id="default4"> 
 
          <label for="default4">Objective of Request</label> 
 
         </div> 
 
         <div class="form-group floating-label"> 
 
          <br> 
 
          <div class="row"> 
 
           <div class="col-md-4 text-center"> 
 
            <b>Items</b> 
 
           </div> 
 
           <div class="col-md-3 text-center"> 
 
            <b>Specs (if any)</b> 
 
           </div> 
 
           <div class="col-md-2 text-center"> 
 
            <b>Quantity</b> 
 
           </div> 
 
           <div class="col-md-2 text-center"> 
 
            <b>Amount</b> 
 
           </div> 
 
           <div class="col-md-1"> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <div id="fields" class="form-group floating-label"> 
 
          <div class="row"> 
 
           <div class="col-md-4"> 
 
            <input type="text" name="make" class="form-control"> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <input type="text" name="make" class="form-control"> 
 
           </div> 
 
           <div class="col-md-2"> 
 
            <input type="text" name="model" class="form-control"> 
 
           </div> 
 
           <div class="col-md-2"> 
 
            <input type="text" name ="serial" class="form-control"> 
 
           </div> 
 
           <div class="col-md-1"> 
 
            <a href="#" id="add" class="btn btn-sm btn-success"><b> + </b></a> 
 
           </div> 
 
           <br><br> 
 
          </div> 
 
         </div> 
 
         <div class="card-actionbar"> 
 
          <div class="card-actionbar-row"> 
 
           <br><br> 
 
           <button type="submit" class="btn btn-flat btn-primary ink-reaction">SUBMIT</button> 
 
          </div> 
 
         </div><!--end .card-actionbar --> 
 
        </form> 
 
       </div><!--end .card-body --> 
 
      </div><!--end .card --> 
 
     </div><!--end .col --> 
 
    </div><!--end .row --> 
 
</div> 
 

 
<!-- END SIZES -->

Answer 1

が <a href="#" id="remove" class="btn btn-xs btn-danger"><b> - </b></a>にご#remove要素を変更し

： は、以下のコードです。

削除機能を次のように変更してください。親の代わりに最も近いものを使用するようにしてください。

ご不明な点がありましたら教えてください。

Answer 2

問題はラインである：jQuery docsから

$(this).parent('#p').remove(); 

：

...親（）メソッドは、これらの各要素の即時親に横断...

.closest()メソッドを使用する必要があります。セット内の各要素について

、素子自体をテストしは、DOMツリー内の 祖先を通してアップトラバースすることによって セレクタと一致する最初の要素を取得：jQuery docsから。

だからあなたのコードは、次のようになります。

$(this).closest('#p').remove(); 

そして、もう一つのノート。おそらく同じIDで重複しているかもしれない要素にidを使うのはベストプラクティスではないと思います。それは問題を引き起こすかもしれません。あなたは、文字列と変数を作成する必要がいけない

Answer 3

https://jsfiddle.net/1aurfeox/1/

。既存の要素を最初にクローン化してから、それを処理してリムーバブル行を作成することができます。

$(document).ready(function() { 
    //Variables 
    var hello = $("div#fields .row").clone(); 
    hello.find("#add").parent().html('<a href="#" id="remove" class="btn btn-sm btn-danger"><b> - </b></a>'); 
    //Add rows to the form 
    $("#add").click(function() { 
     $("#fields").append(hello.clone()); 
     $("#remove").click(function() { 
     $(this).closest(".row").remove(); 
     }); 
    }); 
    });