jqueryでクラスを使用してフィールドを追加および削除する方法

Question

商品の販売のためのフォームを作成しました。 adminはjqueryを使用して複数の製品のクリックを追加ボタンに追加し、削除ボタンをクリックしてフィールドを削除することができます。 div idを使用してこれを追加しようとしていますが、これは機能しません。この画像では、新しい行ボタンの追加をクリックするたびにマーク領域が追加されます。ここ

<div class="row" id="dsf"> 
         <div class="col-md-2"> 
          <select name="p_name" class="form-control" id="p_name"> 
           <option value="">-Select Product-</option> 
           @foreach($products as $product) 
           <option value="{{$product->product_id}}">{{$product->name}}</option> 
           @endforeach 
          </select> 
         </div> 
         <div class="col-md-2"> 
          <input type="text" name="p_code" id="p_code" class="form-control" readonly=""> 
         </div> 
         <div class="col-md-2"> 
          <input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly=""> 
         </div> 
         <div class="col-md-2"> 
          <input type="text" name="u_price" id="u_price" class="form-control" readonly=""> 
         </div> 
         <div class="col-md-1"> 
          <input type="text" name="ctn" id="ctn" class="form-control"> 
         </div> 
         <div class="col-md-1"> 
          <input type="text" name="pcs" id ="pcs" class="form-control"> 
         </div> 
         <div class="col-md-2"> 
          <input type="text" name="t_amt" id="t_amt" class="form-control"> 
         </div> 
         <div id="temp"></div> 

        </div> 

jqueryの一部です。

<script type="text/javascript"> 
$(document).ready(function(){ 
    var elm=$(".dsf"); 
    $("#addrow").click(function(){ 
     $("#dsf").append(); 
    }); 
}); 

Answer 1

これは...

function addRow(tableID) { 
 
\t 
 
\t var table = document.getElementById(tableID); 
 
\t 
 
\t var rowCount = table.rows.length; 
 
\t var row = table.insertRow(rowCount); 
 
\t 
 
\t var cell1 = row.insertCell(0); 
 
\t var element1 = document.createElement("input"); 
 
\t element1.type = "checkbox"; 
 
\t element1.name="chkbox[]"; 
 
\t cell1.appendChild(element1); 
 
\t 
 
\t var cell2 = row.insertCell(1); 
 
\t cell2.innerHTML = rowCount + 1; 
 
\t 
 
\t var cell3 = row.insertCell(2); 
 
\t var element2 = document.createElement("input"); 
 
\t element2.type = "text"; 
 
\t element2.name = "txtbox[]"; 
 
\t cell3.appendChild(element2); 
 
\t 
 
\t 
 
} 
 

 
function deleteRow(tableID) { 
 
\t try { 
 
\t \t var table = document.getElementById(tableID); 
 
\t \t var rowCount = table.rows.length; 
 
\t \t 
 
\t \t for(var i=0; i<rowCount; i++) { 
 
\t \t \t var row = table.rows[i]; 
 
\t \t \t var chkbox = row.cells[0].childNodes[0]; 
 
\t \t \t if(null != chkbox && true == chkbox.checked) { 
 
\t \t \t \t table.deleteRow(i); 
 
\t \t \t \t rowCount--; 
 
\t \t \t \t i--; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t } 
 
\t }catch(e) { 
 
\t \t alert(e); 
 
\t } 
 
} 
 

 

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
 

 
\t <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
 

 
\t <TABLE id="dataTable" width="350px"> 
 
\t \t <TR> 
 
\t \t \t <TD><INPUT type="checkbox" name="chk"/></TD> 
 
\t \t \t <TD> 1 </TD> 
 
\t \t \t <TD> <INPUT type="text" /> </TD> 
 
\t \t </TR> 
 
\t </TABLE>