錨標記着火點擊功能

Question

與顯示沒有風格的div有一個錨標記，這將刪除點擊功能

爲完整的代碼審查鏈接，DIV它正在開發瀏覽器，但不是的jsfiddle

https://jsfiddle.net/eqaxh7d0/

我正在追加顯示無格到另一格是顯示塊，顯然錨標記將是可見的，但

但沒有點擊功能

和刪除我使用這個代碼

$(document).ready(function() { 
    $('.close-div').on('click',function() { 
     $(this).closest('div#nestedFeilds').remove(); 
    });  
}); 

Answer 1

jQuery是沒有聯繫的jsfiddle加載。如果點擊<a>元素的預期結果是刪除的父元素，你可以追加.innerHTML到<div>元素<div>元素中附加click事件給<a>元素，事件處理程序中調用event.preventDefault()防止導航的默認行爲，並呼籲$(this).parent().remove()刪除其中.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() 
 
    ); 
 
    }); 
 
})

<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">&nbsp;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>