how can i delete parent div with style display none

Question

my div with style display none have a anchor tag on click of that I want to delete the complete div

my div will be append on click

code is

<div class="row" id="mainContainer">
  <div class="col-md-1 col-xs-4">
    <label for="Education">Education</label>
  </div>
  <div class=class="col-md-8 col-xs-8  verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
    <a href="" style="color: red;margin-left: auto; ">Delete Education</a>
    <input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name[]"> |
    <br>
    <input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name[]">
    <br>
    <input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name[]">
    <br>
  </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>
</form>

I am firing function on click but nothing is happening

my function is

$(document).ready(function() {
    $('.close-div').on('click', function(){
      alert("hh");
    });     
});

Answer 1

I think I understand what you are getting at, and thats only from piecing it together from your name 2ndmainContainer, so hopefully there is a maincontainer. What you need to do is target the main container and just blank out the html inside of it or you can replace the following html,

<script>function makeDisappear(){document.getElementByiD('maindiv').outerHTML =''; }</script>

will target the div tag itself and erase any tags, if you use .innerHTML you can place something inside the tags. You wrap this in an anchor link thats tied to a function with your target div element that remains inside. <a click="makeDisappear()"> div in here </a> But again I am trying to piece this together from your question. More details would help.

Answer 2

You're using a class to select the anchor tag but you haven't set the class attribute to the a html element. Set the attribute in your html code first...

<a href="" class="close-div" style="color: red;margin-left: auto; ">Delete Education</a>

... and then the click event should work...

$(document).ready(function() {
    $('.close-div').on('click',function() {
        alert("hh");
    });     
});

Then, if you want to hide the container div when you click that anchor...

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

... or if you want to remove it from the DOM...

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

NOTE: There's a typo in your html code where you duplicate the class attribute...

<div class=class="col-md-8 col-xs-8 verticalLine" id=...

... just change it for...

<div class="col-md-8 col-xs-8 verticalLine" id=...

Answer 3

try this

insert class from anchor tag and that anchor tag you will place after this div. 类，并将该锚标记放置在此 div之后。 Or where you want check before execute that will make visible.

Then you will traverse parent tag like

   $(".close-div").parents("DIV.your parent class").find(".your wanted class").attr("attrute-name");

Answer 4

First change your div's display to block, then:

$("#nestedFeilds").on("click","a",function(){
        $("#nestedFeilds").remove();
    });