jquery click to make parent element disappear

JQuery is a widely used Javascript library that provides a simple and easy-to-use way to manipulate HTML documents and handle events. In web development, sometimes you need to implement the function of clicking an element to make its parent element disappear. This article will introduce how to use JQuery to achieve this function.

1. HTML structure

First, we need to define an HTML structure, including a parent element and a child element. The code is as follows:

<div class="parent">
  <div class="child"></div>
</div>

2. CSS styles

In order to make the page more beautiful, we need to define some CSS styles. Among them, the parent element needs to be set to relative positioning, the child element needs to be set to absolute positioning, and the position of the upper left corner must be set to 0. The code is as follows:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

3. JQuery code

Now, we need to write JQuery code to realize the function of making the parent element disappear by clicking on it.

First, we need to use JQuery selector to select the parent element and child element, and set the child element to be centered through CSS. The code is as follows:

$(document).ready(function(){
  $(".child").css("margin", "auto");
});

Next, we need to use JQuery's click() function to listen for page click events, and when the click event occurs, use the fadeOut() function to make the parent element disappear. The code is as follows:

$(document).ready(function(){
  $(".child").css("margin", "auto");
  
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

4. Complete code

Finally, the complete code is as follows:

HTML code:

<div class="parent">
  <div class="child"></div>
</div>

CSS code:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: auto;
}

JQuery code:

$(document).ready(function(){
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

5. Summary

Through the above steps, we have successfully implemented the function of clicking to make the parent element disappear. I believe readers already understand the basic usage of JQuery and how to use JQuery to implement certain page functions. At the same time, readers can also further expand on this basis to strengthen their Web development skills.

The above is the detailed content of jquery click to make parent element disappear. For more information, please follow other related articles on the PHP Chinese website!