What is the best way to incorporate a single "X" close button to close individual div elements, allowing for the closure of one div with each click of the button?

Among these options in rectangles, each with a class of ('.caja'), the styling and database values are stored within this class for user selection.

However, I am facing an issue where jQuery and CSS automatically close all div elements when the user dismisses any option. I have attempted using the main class element ('.caja') but it resulted in closing all divs altogether.

Another approach I tried was assigning numerical names to individual rectangles, but this led to repetitive code which is not ideal.

<div class="d-inline-flex flex-wrap row justify-content-center">
  <div class="caja caja-1" style="background-color: white;">
    <label class="caja-label">Administración de empresas</label>
    <label class="container-caja">
            <input type="checkbox" id="myCheck" onclick="myFunction()">
            <span class="checkmark"></span>
          </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <!-- Other similar div elements follow -->

I am seeking a solution that allows me to close only one specific div per click on the close button, instead of closing all div elements at once. Any guidance or suggestions would be highly appreciated.

jqueryhtmlcss

Answer №1

To address this issue, one strategy is to make the function target DOM elements that are related to the element that was clicked. For instance, the following code hides the nearest parent element with the class .caja when the corresponding $('this') click handler is triggered:

$('.btn-cerrar').click(function() {
  $(this).closest('.caja').hide()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 1</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>

<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 2</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>

<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 3</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>

<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 4</label>
  <button type="button" class="btn-cerrar"> X </button>
</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

The secondary AJAX button failed to function when triggered by another AJAX request

I am currently working on a website that allows users to upload, create lists, download, and delete files from Google Drive. Everything seems to be functioning well (viewing and listing items is working fine). However, I am facing an issue with the delete ...

javascriptphpjqueryajax

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

javascripthtmlangulartypescript

Invoking a plugin method in jQuery within a callback function

Utilizing a boilerplate plugin design, my code structure resembles this: ;(function ( $, window, document, undefined ) { var pluginName = "test", defaults = {}; function test( element, options ) { this.init(); } test.pro ...

javascriptjqueryjquery-plugins

Issues with Phonegap ajax form functionality

I have the following code snippet in my index.html file: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> ...

javascripthtmlajaxcordova

Is it possible to update a URL in PHP without having to refresh the entire page by utilizing JavaScript?

Below is the JavaScript function I am using to create a URL: function reload(form){ var val1=form.dav.options[form.dav.options.selectedIndex].value; var val2=form.pathogen.options[form.pathogen.options.selectedIndex].value; var val3=form.topicF.options[for ...

javascriptphpjqueryajaxjquery-events

Conceal the table row if the table data does not have any text within it

I need a way to hide rows in a table where the corresponding cells do not contain "text2". Initially, I tried using this code: $('td:contains("text2")').parent().toggle()})) Although this successfully hides rows with cells containing "text2", I ...

jqueryhtml-tablehide

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

htmlcssresponsive-design

Incorporate attributes into object properties in a dynamic manner

Currently, I am experimenting with bootstrap-multiselect and my goal is to incorporate data attributes into the dataprovider method. Existing Data Structure: var options = [ {label: 'Option 1', title: 'Option 1', value: ' ...

javascriptjquerybootstrap-multiselect

Showing JSON data stored in Local Storage

My goal is to retrieve a JSON object from local storage in the web browser and then display the values. While I am able to save the JSON object and add new data to it, I am struggling with the logic required to fetch and show it. For context, the variable ...

jqueryjsonhtmllocal-storagelocal

Unable to retrieve the "value" attribute from the DOM element of the plus/minus box

Looking to retrieve the "value" attribute from the selection box that allows users to choose the quantity of a specific item on my website. As a beginner in both Javascript and HTML, I noticed the attribute when inspecting the element: <input size="2" ...

javascriptjqueryhtmldomgoogle-tag-manager

How come my content is overflowing beyond the edges of the page?

Hey there! Check out my webpage I'm working on: I've run into an issue where there is a lot of unnecessary whitespace after the footer, but oddly enough it only shows up in browsers other than Mozilla Firefox. I attempted to investigate using i ...

htmlcsslayoutremoving-whitespace

Highlight particular terms (key phrases) within text contained in a <td> tag

I am currently working on a project and facing a challenge that I am unfamiliar with. My task is to highlight specific keywords within text located inside a <td> element. I cannot manually highlight the keywords as the texts are dynamic, originating ...

javascriptjqueryhtmljsp

Scroll bar design that seamlessly integrates with text wrapping when hovered over

In many of the pages on my blog, I have a structure that consists of boxes with a link like this: http://jsfiddle.net/gliu/E32Bh/ The issue I'm facing is that when too much text is added to these boxes, a vertical scrollbar appears only upon hoverin ...

htmlcsstextscrollbar

Tips for triggering window load event on a particular page

I need to trigger the windows.load event on a specific page. Currently, I have set it up like this: $(window).load(function(){ if(document.URL == "/car-driving.html") { overlay.show(); overlay.appendTo(document.body); $('.popup' ...

javascriptjqueryhtml

I am unable to retrieve a list using Jquery's ajax function

Can someone please help me diagnose the issue with the code below and why it's not functioning properly? This code snippet is from a webmethod in an aspx.cs page. [webmethod] [ScriptMethod(ResponseFormat=ResponseFormat.Json)] public sta ...

c#jqueryasp.netajaxweb-services

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

I've been grappling with a CSS issue. I'm attempting to ensure that my accordion containers within my layout all have the same height as the tallest item on their respective rows. This would create a sleek and responsive layout where all items ar ...

htmlcssmaterial-ui

Disappearance of jQuery Ui Spinner on Woocommerce cart page occurs after cart update

I've encountered a problem and am struggling to find a solution. Currently, I am utilizing the jquery ui spinner in the product quantity section to set minimum and maximum quantities for each product. This allows users to increase the quantity by the ...

jqueryajaxwordpressjquery-uiwoocommerce

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 ...

cssvue.jssvggridsome

Using jQuery with the "include" tag in Django templates

I'm attempting to reduce the redundancy of repeatedly appending the same div. When using ajax and attempting to pass a context to another file after each successful post, I keep encountering TemplateSyntaxError. TemplateSyntaxError at /items/order/254 ...

javascriptjquerydjangodjango-templates

The words overlaid on the image spill out beyond its edges

I want to create a design where the text flows outside of the image and continues into another container. After some trial and error, I managed to achieve a layout where the text seamlessly extends beyond the image and into a separate section. Ideally, the ...

htmlcssbootstrap-4