Jqueryでいくつかのクラスの後にdivを追加する方法

Question

これはdivを追加したいHTMLコードです。最後の子（.row-table）の後にdivを追加したい。私はjqueryで私は何か間違っていると思う新しいです。

<div class="details-box-table"> 

    <div class="row-table"> 
     <div class="rTableHead"><label for="Traveldate">S.No</label></div> 
     <div class="rTableHead"><label for="Traveldate">Amount</label></div> 
     <div class="rTableHead"><label for="Traveldate">Mode</label></div> 
     <div class="rTableHead"><label for="Traveldate">Bank Name</label></div> 
     <div class="rTableHead"><label for="Traveldate">Date</label></div> 
     <div class="rTableHead"><label for="Traveldate">Remarks</label></div> 
     <div class="rTableHead"><label for="Traveldate">Action</label></div> 
    </div> 

<div class="row-table"> 
     <div class="rTableHead"><label for="Traveldate">1</label></div> 
     <div class="rTableHead"><label for="Traveldate">2000</label></div> 
     <div class="rTableHead"><label for="Traveldate">Cash</label></div> 
     <div class="rTableHead"><label for="Traveldate">UT Bank</label></div> 
     <div class="rTableHead"><label for="Traveldate">02/03/2017</label></div> 
     <div class="rTableHead"><label for="Traveldate">Remarks</label></div> 
     <div class="rTableHead"><label for="Traveldate">Notngin</label></div> 
    </div> 




<div>I want to append here new div after last class"row-table"</div> 

ここにJqueryコードがあります。

$(document).ready(function(){ 

    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".details-box-table"); //Fields wrapper 
    var add_button  = $("#add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).children(".row-table").last().after('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Answer 1

あなたがHTMLで<button id="add_field_button>を追加し忘れていないと仮定すると、あなたのコードの残りの部分は正常に動作しているように見えます：

$(document).ready(function() { 
 

 
    var max_fields = 10; //maximum input boxes allowed 
 
    var wrapper = $(".details-box-table"); //Fields wrapper 
 
    var add_button = $("#add_field_button"); //Add button ID 
 

 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    if (x < max_fields) { //max input box allowed 
 
     x++; //text box increment 
 
     $(wrapper).children(".row-table").last().after('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
 
    } 
 
    }); 
 

 
    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="add_field_button">Add Field</button> 
 

 
<div class="details-box-table"> 
 

 
    <div class="row-table"> 
 
    <div class="rTableHead"><label for="Traveldate">S.No</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Amount</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Mode</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Bank Name</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Date</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Remarks</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Action</label></div> 
 
    </div> 
 

 
    <div class="row-table"> 
 
    <div class="rTableHead"><label for="Traveldate">1</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">2000</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Cash</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">UT Bank</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">02/03/2017</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Remarks</label></div> 
 
    <div class="rTableHead"><label for="Traveldate">Notngin</label></div> 
 
    </div> 
 

 

 
    <!-- I want to append here new div after last class"row-table" --> 
 
</div>

Answer 2

私は部品についてのコメントを追加しました追加した。 addリンクを実装しました。コードは自動的にテキストボックスを削除し、内部データを追加領域に追加します（名前は.appendTo）。

$(document).ready(function(){ 
 
    /* NEW CODE */ 
 
    $(wrapper).on("click",".add_field", function(e){ //user click on remove text 
 
     e.preventDefault(); 
 
     $parent = $(this).parent('div'); 
 
     $('<div class="row-table">') 
 
      .append($parent.find("input").val()) 
 
      .appendTo(".appendTo"); 
 
     $parent.remove(); 
 
     x--; 
 
    }); 
 
    /* END NEW CODE */ 
 

 
    var max_fields  = 10; //maximum input boxes allowed 
 
    var wrapper   = $(".details-box-table"); //Fields wrapper 
 
    var add_button  = $("#add_field_button"); //Add button ID 
 

 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e){ //on add input button click 
 
     e.preventDefault(); 
 
     if(x < max_fields){ //max input box allowed 
 
      x++; //text box increment 
 
      $(wrapper).children(".row-table").last().after('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a> <a href="#" class="add_field">Add</a></div>'); //add input box 
 
     } 
 
    }); 
 

 
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
 
    }) 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="details-box-table"> 
 

 
    <div class="row-table"> 
 
     <div class="rTableHead"><label for="Traveldate">S.No</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Amount</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Mode</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Bank Name</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Date</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Remarks</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Action</label></div> 
 
    </div> 
 

 
<div class="row-table"> 
 
     <div class="rTableHead"><label for="Traveldate">1</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">2000</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Cash</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">UT Bank</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">02/03/2017</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Remarks</label></div> 
 
     <div class="rTableHead"><label for="Traveldate">Notngin</label></div> 
 
    </div> 
 
<button id="add_field_button">Add Butn</button> 
 

 
<!-- I added the class 'appendTo' here --> 
 
<div class="appendTo">I want to append here new div after last class"row-table"</div>