jQuery丟失div div，修改元素時出現問題

Question

我正在構建一個表單，用戶可以在其中動態添加或刪除行。我已經構建了jQuery函數來完成這個任務，但是我在這個過程中失去了一些元素，我找不到原因。

HTML摘錄

<div class="options" id="options"> 
     <div class="item1" id="item1"> 
      <div class="left_wrap"> 
       <ul> 
        <li class="col_id b-bottom"></li> 
        <li class="hazard_header"><h3>Hazard</h3></li> 
        <li class="hazard_input b-bottom"></li> 
        <li class="con_header b-bottom"><h3>Controls</h3></li> 
        <li class="cat_header"><h3>Consequence Category</h3></li> 
        <li class="cat_options"></li> 
       </ul> 
      </div> 
      <div class="right_wrap"> 
      </div> 
      <div class="controls"> 
       <div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div> 
       <div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div> 
      </div> 
     </div><!-- End Item --> 
    </div> <!-- End Options Wrap --> 

的jQuery

var count = 1; 
var wrap; 
var item; 

function addRow(){ 
    count++; 
    var $newElement = $(item); 
     $newElement.find("li.col_id").text(count); 
     // Doesn't work 
     $newElement.find(".item1").removeClass("item1").addClass("item"+count); 
     // Remove ID item1 make it (item+count) 
     // Change deleteRow('#item1') to deleteRow('#item2') 
     $($newElement).appendTo(".options"); 

    }; 

$(document).ready(function(){ 
    wrap = $(".options").html(); 
    item = wrap; 
    id = $("div.item1"); 
    id.find("li.col_id").text("1"); 
}); 

我有評論指出，我有問題addRow內部的部件。有線的事情是當我顯示我的（項目）裏面。它顯示我wrap（），但是當我在addRow裏面它不顯示它。

我一直堅持這個幾個小時，並嘗試了幾種不同的方法來做到這一點，但我一直在短小。

當我點擊添加行它確實工作，但我永遠不能改變包裝的類和ID。

Answer 1

我已更新您的代碼。 $ newElement已經是您想用新ID和Class更新的主DIV。

var count = 1; 
 
var wrap; 
 
var item; 
 

 
function addRow(){ 
 
    count++; 
 
    var $newElement = $(item); 
 
     $newElement.find("li.col_id").text(count); 
 
     // Remove previous class and Add new Class 
 
     $newElement.attr('class','').addClass("item"+count); 
 
     // Update the ID 
 
     $newElement.attr('id',"item"+count); 
 
     // Update the onlick event with new Item ID 
 
     $newElement.find('.deleteRow').attr('onclick','deleteRow("#'+"item"+count+'")'); 
 
     // Remove ID item1 make it (item+count) 
 
     // Change deleteRow('#item1') to deleteRow('#item2') 
 
     $($newElement).appendTo(".options"); 
 

 
    }; 
 

 
$(document).ready(function(){ 
 
    wrap = $(".options").html(); 
 
    item = wrap; 
 
    id = $("div.item1"); 
 
    id.find("li.col_id").text("1"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="options" id="options"> 
 
     <div class="item1" id="item1"> 
 
      <div class="left_wrap"> 
 
       <ul> 
 
        <li class="col_id b-bottom"></li> 
 
        <li class="hazard_header"><h3>Hazard</h3></li> 
 
        <li class="hazard_input b-bottom"></li> 
 
        <li class="con_header b-bottom"><h3>Controls</h3></li> 
 
        <li class="cat_header"><h3>Consequence Category</h3></li> 
 
        <li class="cat_options"></li> 
 
       </ul> 
 
      </div> 
 
      <div class="right_wrap"> 
 
      </div> 
 
      <div class="controls"> 
 
       <div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div> 
 
       <div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div> 
 
      </div> 
 
     </div><!-- End Item --> 
 
    </div> <!-- End Options Wrap -->