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 -->