通過追加div放棄其風格

Question

我想克隆的部門有一個特定的位置。我怎樣才能追加到我擁有的其他部門。

我格樣式代碼

<div class="row"> 
<div class="col-xs-4"></div> 
<div class="col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none;"> 

這裏的鏈接 https://screenshots.firefox.com/TAqBN5IIT8atR6lA/localhost

，並在那裏我使上面的代碼是

<div class= "row" id="2ndmainContainer"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"> 
    </div> 
</div> 

後，我的 「nestedFeilds」 即將結束的div。我有「showhere」除涉及像這樣

https://screenshots.firefox.com/IngUgWgQTJeAjlOC/localhost

jQuery的功能附加功能不工作後 只能出現在一行「COL-XS-8」和「col-XS-4」附加

$(document).ready(function() { 


$("#addNew").click(function() { 
    var maindiv = document.getElementById('nestedFeilds').innerHTML; 
    $("#showhere").append(maindiv); 
    maindiv.attr('name', 'myid'); 
    }); 
}); 

在這裏它的jsfiddle但在這裏它不工作 https://jsfiddle.net/r9wtcsj9/

Answer 1

希望這有助於你（查看全屏查看結果）。對於label這兩列和刪除的內聯樣式，您可以看到我所做的更改包括col-md-1和col-md-5。其餘的代碼保持不變。

$("#addNew, #addNew1").click(function() { 
 
\t if ($("#nestedFeilds").is(":visible")) { 
 
\t \t $("#showhere").append($("#nestedFeilds").html()); 
 
\t \t $("#2ndmainContainer").show(); 
 
\t } 
 

 
\t $("#nestedFeilds").attr('name', 'myid').show(); 
 
\t $("#addNew").hide(); 
 
\t $("#addNew1").show(); 
 
});

.verticalLine { 
 
    border-left: thick solid #0accff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<form> 
 
<label>Your Profile</label> 
 
<div class="row" id="mainContainer"> 
 
\t <div class="col-md-1 col-xs-4"> 
 
\t \t <label for="Education">Education</label> 
 
\t </div> 
 
\t <div class="col-md-7 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display:none;"> 
 
\t \t <a href="" style="color: red;float:right; ">Delete Education</a> 
 
\t \t <input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name"> 
 
\t \t <br> 
 
\t \t <input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name"> 
 
\t \t <br> 
 
\t \t <input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name"> 
 
\t \t <br> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-3"> 
 
\t \t \t \t <select class="form-control" id="YearName" style="float:left;" required="" name="first_year_name" value=''> 
 
\t \t \t \t <option value="2017">2017</option> 
 
\t \t \t </select> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-3"> 
 
\t \t \t \t <select class="form-control" style="margin-left: -20px; float:left;" id="monthName" required="" name="first_Name_month" value=''>Select Month 
 
\t \t \t \t <option value='01'>January</option> 
 
\t \t \t </select> 
 
\t \t \t </div> 
 
\t \t \t <div style="margin-left: -20px;float:left;"> 
 
\t \t \t \t <p style="text-align: left; margin-top: 5px">&nbsp;to</p> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-3"> 
 
\t \t \t \t <select class="form-control" id="YearName" style="margin-right:30px; float:left;" required="" name="second_year_name" value=''>Select Month 
 
\t \t \t \t <option value="2017">2017</option> 
 
\t \t \t </select> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-3"> 
 
\t \t \t \t <select class="form-control" id="monthName" style="float:left; margin-left: -20px;" required="" name="Second__Name_month" 
 
\t \t \t \t \t value=''>Select Month 
 
\t \t \t \t \t <option value='01'>January</option> 
 
\t \t \t </select> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div style="float:left;"><a id="addNew"> Add Education</a></div> 
 
</div> 
 

 
<div class="row" id="2ndmainContainer" style="display:none;"> 
 
\t <div class="col-md-1 col-xs-4"></div> 
 
\t <div class="col-md-7 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"> 
 
\t </div> 
 
</div> 
 

 
<div style="margin-left: 133px;float:left;"><a id="addNew1" style="display:none;"> Add Education</a></div> 
 
</form>