Ways to conceal a division by selecting an anchor button on this element

One thing I'm curious about is how to hide only the current div that I click on. Any suggestions on how to achieve that?

$('.ads-close-btn').click(function() {
    $('.full-width-add').hide("slow");
  });

alert('My main question is how can I hide only the current div');
.a_text {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/16f70ff438.js"></script>
<!--First add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>
<!--second add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>
<!--third add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>
<!--4th add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>

My main question is how can I hide only the current div that I click on... Any suggestions?

javascriptjqueryhtmlcsshide

Answer №1

Experiment with using this along with jquery's closest() method

$('.close-button').click(function() {
$(this).closest('.banner').hide("slow"); 
});

Answer №2

simply include this line

$(this).parents('.full-width-add:first').hide("slow");

in place of

$('.full-width-add').hide("slow");


$('.ads-close-btn').click(function() {
  $(this).parents('.full-width-add:first').hide("slow");
});
.a_text {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/16f70ff438.js"></script>
<!--First add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>
<!--second add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>
<!--third add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>
<!--4th add div-->
<div class='full-width-add'>
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a>
</div>

Answer №3

Combine this using the parents method 

$('.ads-close-btn').click(function() {
    $(this).parents('.full-width-add').hide("slow");
  });

https://jsfiddle.net/w8fv6os7/

Answer №4

Writing the following code:

$('.full-width-add')

will target every element with the class .full-width-add.

Consider using the following code instead:

$('.ads-close-btn').click(function() {
$(this).parent().hide("slow"); 
});

With this modification, you will only select the parent element of the close button.

Answer №5

Here is the code snippet:

$('.ads-close-btn').click(function() {
  var curId=$(this).attr('id');
      $('#div'+curId).hide("slow");
  });

alert('I am wondering how to hide only the current div');
.a_text {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/16f70ff438.js"></script>
<!--First add div-->
<div class='full-width-add' id="div1">
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn' id="1"><i class='fa fa-close' ></i></a>
</div>
<!--second add div-->
<div class='full-width-add' id="div2">
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn' id="2"><i class='fa fa-close' i></i></a>
</div>
<!--third add div-->
<div class='full-width-add' id="div3">
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn' id="3"><i class='fa fa-close' ></i></a>
</div>
<!--4th add div-->
<div class='full-width-add' id="div4" >
  <div class='a_text'>some text</div>
  <a href='#' class='ads-close-btn' id="4"><i class='fa fa-close' ></i></a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript allows you to apply a filter to an array

Query: Is there a way to display a pre-selected item from my dropdown using its unique ID? Issue/Explanation: The dropdown options in my web service are dynamically fetched based on a user's ZipCode. For example, a Provider is displayed as {Pho ...

javascriptangulartypescript

The combination of Angular Hottowel's 'blocks.exception' and 'blocks.router' prevents the App from being displayed in the browser

After delving into Angular's fundamentals a couple of months back, I am now venturing into building a practice app that mirrors industry standards. I recently completed John Papa's Play by Play and Clean Code courses on Pluralsight, which furthe ...

javascriptangularjshottowel

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

My goal is to implement a filter in my AngularJS code that will filter data based on selected checkboxes. If no checkbox is selected, all results should be displayed without any filtering. Currently, the issue I am facing is that the data is only displayed ...

javascripthtmlangularjsfilter

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing. The width values in pixels need to be manually adjusted based ...

javascripthtmlcss

Sending server components to client components as properties

I've been working on making an API call in my ServerComponent.js to retrieve data that I can then pass as props to ClientComponent.js. This allows me to display cached text content from an API on the front page without having to make a new API call ev ...

javascriptreactjsnext.js

What is the optimal strategy for collecting a comprehensive array of candidates in WebRTC minus the use of ice

Currently, I am attempting to establish a video call between two computers without using ice trickle. At times, I succeed in making the video call, but other times (for unknown reasons), I am unable to gather all the ice candidates. The iceGatheringState r ...

javascriptwebrtc

The loading of JSON data is unsuccessful in jqwidgets

Attempting to populate a jqwidgets grid with JSON Response. The grid loads with empty data and no errors are reported. Shown below is the JSON response along with the jQuery code. Can you spot what I might be missing? JSON DATA : {"holidayrule":["{&bso ...

jqueryajaxjsonjqwidget

Is it possible to determine if NPM install is functioning correctly in various situations or does it vary?

npm init is the first step to start a project I have specified axios: "~1.2.4" in my package.json file When I execute npm install, it installs version 1.2.6, updating to the latest patch as expected If I use ^1.2.4 in package.json and run npm in ...

javascriptnode.jsnpmnode-modulespackage.json

What is the reason behind the significant 80% reduction in PNG files by grunt-contrib-imagemin compared to the minimal reduction of less than 0.1%

Just getting started with Grunt here. Recently, I've been experimenting with grunt-contrib-imagemin. When it comes to compressing PNG files, it does an impressive job. It typically reduces the size by around 80%. However, I'm finding that the ...

javascriptnode.jsimagegruntjscompression

Choosing between Ajax.ActionLink and combining Html.ActionLink with a Jquery.Ajax call

One way to call an asp.net mvc controller is through Ajax.ActionLink("Get customers","GetCustomers","Customer"); Another method involves using Html.ActionLink and a jQuery ajax call. What sets these two approaches apart? ...

jqueryajaxasp.net-mvcactionlink

Creating a full width and height slider with a header menu that is responsive to all device screen sizes

Looking to create a full-width slider with a header that adjusts for all screen sizes, especially larger devices. I've been searching online but haven't found a satisfactory solution yet. If anyone has any ideas or tips on how to achieve this, pl ...

jqueryhtmlcssslider

Is it possible to send an ajax request to a user control file with the extension .ascx?

I am trying to interact with a user control on my page through ajax. Is it possible to make an ajax request directly to the user control (.ascx) instead of .aspx or .ashx files? ...

javascriptasp.netajaxascx

How can I use jQuery to set a background image and position on a website?

I am trying to incorporate a background image fade effect along with the color fade in and out when hovering over a link using my current code. However, I am unsure of how to set the background image and position within the code. $(document).ready(funct ...

jqueryhtmlcss

dealing with a situation where the call to the getElementsByTagname method returns null

Here is a snippet of JavaScript code that I am working with: <script language="JavaScript" type="text/javascript"> var sendReq = getXmlHttpRequestObject(); var receiveReq = getXmlHttpRequestObject(); var lastMessage = 0; var mTimer; ...

htmlxmlajax

Traversing the nested arrays, processing column by column

Below is an array of subarrays const array = [ [0, 1, 2, 3], // Going from top to bottom? [4, 5, 6, 7, 8, 9], // | [10, 11, 12, 13, 14], // | [15, 16, 17, 18, 19], // | ] // V My goal is to achieve the fol ...

javascriptarrayssortingsub-array

Adjust the size of the sliding tool with images of varying dimensions

My mobile-first slider features three different types of images: tall, horizontally long, and square. I want the size of the slider to be determined by the horizontally long image and then scale and center the other images to fit its size. To achieve this, ...

javascriptjquerycsssliderresize

Pulling down the data with Ajax "GET"

When a user clicks on a button, a zip file will be downloaded. I have the necessary components in place, but I am struggling to ensure they work together seamlessly. The "GET" call will retrieve byte content with the content type specified as application/ ...

javascriptajaxhttpwebfrontend

Is FIREFOX better with plugins or extensions?

I have created a JavaScript function that changes the colors of images on web pages, specifically to assist colorblind individuals in identifying content. The entire development process was done using JavaScript within the Dreamweaver environment, along w ...

javascriptfirefoxpluginsfirefox-addon

Generate an AngularJS directive on the fly to dynamically capture user input from the freshly created directive

Let's say I have a directive called "foo" with the following content: <div> <label>Enter foo: </label> <input ng-model="myModel"/> </div> Then, I use it in the following way: <foo></foo> <button>Add f ...

javascriptangularjs

What are the distinct components used in CSS for :target?

I've encountered an issue with nesting :target pseudoclasses. Currently, I have a section containing an anchor tag. Right now, everything is functioning as intended; when I click on the anchor linking to #Current, it expands the area and displays the ...

htmlcsstarget