Jquery refuses to conceal a particular element

Question

Jquery refuses to conceal a particular element

I've encountered this issue before, but I'm facing a problem this time. I'm attempting to create a popup that is initially hidden. When clicked, the popup does appear, but I'm unable to close it. Additionally, when trying to change the styles using developer tools from display:none to display:block, it automatically switches back. Currently, the popup is located in the head section of the page, but I have also tried placing it at the very bottom.

Here is the HTML code for the popup:

<div class="tablecell midlineunit popup-hml middle">
    <div class="hml-popup-bg popupbg ">
        <div class="hml-popup-cnt">
            <div class="closepopup">X</div>
        </div>
    </div>
</div>

And here is the JavaScript associated with it:

$(".popup-hml").each(function(){
     $(this).click(function(){
         $(this).find(".hml-popup-bg").show();
     });
});
$(".closepopup").each(function(){
    $(this).click(function(){
        $(this).parent().parent().hide();
    });
});

Lastly, .hml-popup-bg has been styled as hidden in the CSS.

javascript jquery html css

Answer 1

Answer №1

Here's a more efficient way to achieve the desired functionality: Instead of using .each(), you can simply utilize .click() and employ .closest() in place of parent().parent();

$(".popup-hml").click(function(){
    $(this).find(".hml-popup-bg").show();
});

$(".closepopup").click(function(e){
    e.stopPropagation();
    $(this).closest('.hml-popup-bg').hide();
});

Answer 2

Here's a more efficient way to achieve the desired functionality: Instead of using .each(), you can simply utilize .click() and employ .closest() in place of parent().parent();

$(".popup-hml").click(function(){
    $(this).find(".hml-popup-bg").show();
});

$(".closepopup").click(function(e){
    e.stopPropagation();
    $(this).closest('.hml-popup-bg').hide();
});

Answer 3

Answer №2

It seems like this solution should do the trick. By closing it without stopping propagation, it allows for re-opening through bubbling.

$(".popup-hml").each(function(){
     $(this).click(function(){
         $(this).find(".hml-popup-bg").show();
     });
});
$(".closepopup").each(function(){
    $(this).click(function(e){
        e.stopPropagation();
        $(this).parent().parent().hide();
    });
});

Check out the code snippet here

Answer 4

It seems like this solution should do the trick. By closing it without stopping propagation, it allows for re-opening through bubbling.

$(".popup-hml").each(function(){
     $(this).click(function(){
         $(this).find(".hml-popup-bg").show();
     });
});
$(".closepopup").each(function(){
    $(this).click(function(e){
        e.stopPropagation();
        $(this).parent().parent().hide();
    });
});

Check out the code snippet here

Answer 5

Answer №3

It appears that your use of jQuery's .each() method is not in the correct place. Consider setting up 2 event listeners instead - one to open a popup when a button is clicked, and another to close it when the "X" is clicked.

You could achieve this functionality with the following jQuery code:

$(document).on("click", ".popup-btn", function(){
    $(".popup-overlay").show();
});
$(document).on("click", ".close-popup", function(){
    $('.popup-overlay').hide();
});

Answer 6

It appears that your use of jQuery's .each() method is not in the correct place. Consider setting up 2 event listeners instead - one to open a popup when a button is clicked, and another to close it when the "X" is clicked.

You could achieve this functionality with the following jQuery code:

$(document).on("click", ".popup-btn", function(){
    $(".popup-overlay").show();
});
$(document).on("click", ".close-popup", function(){
    $('.popup-overlay').hide();
});

Jquery refuses to conceal a particular element

Answer №1

Answer №2

Answer №3

Similar questions

Displaying Bootstrap alert after a successful jQuery AJAX call

Display method JSONized

Javascript for Cordova utilizing WebSocket and incorporating client side certificates

Using the `find()` method in a loop of Mongoose iterate

How can you implement Jquery Ajax function for enhancing the Ecommerce Category Layout?

verifying the presence of a specific key within a dictionary in Python

How do I incorporate Spotify into my mobile app to enable seamless background music playback?

Current recommended method for updating innerHTML with properly formatted text?

Where should I place my custom menu script in Wordpress and how do I do it?

Having trouble activating my Nav Toggle button on Bootstrap 4

Detecting Image Loading with Javascript

The image displayed by the @vercel/og API route is not appearing correctly

Pressing the "Enter" key will submit the contents of

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

What causes the reflection of JavaScript variables when there is a change in ng-model?

Adding a Click class can cause significant disruption to the entire CSS layout

Why do Material UI components fail to render in jsdom while using Jest?

Add each individual item from the array into the database sequentially

Boost the figures in an HTML input without affecting the letters

Guide to refreshing a localStorage variable before transferring it to an Ajax request