显示无样式的div有一个锚标记,它将删除点击功能上的div
对于完整的代码审查链接,它正在浏览器上工作但不在jsfiddle
https://jsfiddle.net/eqaxh7d0/
我将display none div添加到另一个显示块的div中,因此显然可以看到锚标记但是
但没有点击功能
和删除我正在使用此代码
$(document).ready(function() {
$('.close-div').on('click',function() {
$(this).closest('div#nestedFeilds').remove();
});
});
答案 0 :(得分:1)
jQuery没有加载到链接的jsfiddle。如果点击<a>
元素的预期结果是删除父元素,您可以将.innerHTML
附加到<div>
元素附加click
事件到<a>
元素<div>
元素,在事件处理程序中调用event.preventDefault()
以防止导航的默认操作,并调用$(this).parent().remove()
以删除动态创建的<div>
父元素,其中.innerHTML
已设置
$(function() {
var i = 0;
$("#addNew").click(function() {
i++;
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#nestedFeilds :input").each(function() {
var orignalname = $(this).attr('name');
$(this).attr('name', orignalname.substring(0, orignalname.length - 1) + i);
});
$("#showhere").append(
$("<div>", {"class":"field-parent", html:maindiv})
.find("a").on("click", function(e) {
e.preventDefault();
$(this).parent(".field-parent").remove()
}).end()
);
});
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your Profile</label>
<div class="row" id="mainContainer">
<div class="col-md-1 col-xs-4">
<label for="Education">Education</label>
</div>
<div class="col-md-8 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
<a href="" style="color: red;float:right; ">Delete Education</a>
<input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name_0">
<br>
<input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name_0">
<br>
<input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name_0">
<br>
<div class="row">
<div class="col-xs-3">
<select class="form-control" id="YearName" style="float:left;" required="" name="first_year_name_0" value=''>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control" style="margin-left: -20px; float:left;" id="monthName" required="" name="first_Name_month_0" value=''>Select Month
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
<div style="margin-left: -20px;float:left;">
<p style="text-align: left; margin-top: 5px"> to</p>
</div>
<div class="col-xs-3">
<select class="form-control" id="YearName" style="margin-right:30px; float:left;" required="" name="second_year_name_0" value=''>Select Month
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control" id="monthName" style="float:left; margin-left: -20px;" required="" name="Second__Name_month_0" value=''>Select Month
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" id="2ndmainContainer">
<div class="col-md-1 col-xs-4"></div>
<div class="col-md-8 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
<div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>
&#13;