Triggering jQuery events can be customized by excluding certain elements using the

Is there a way to hide the div "popu" when clicking on the img "tri"? I've tried using .not() since the img is a child of the div popu, but it didn't work. Also, I need to make sure that clicking on the div "textb" does not trigger the hide action.

HTML

<div id="re" class="column">
    <div id="s" class="popu">
        <img class="tri" src="img/whtri.png"/>
        <div class="textb">
            <center style="font-size:14px;">Item Title</center>
            <span style="font-size:12px;">Description this is an item that is very good and i like it very much! I like
                <span class="highl">More...</span>
            </span>
            <span style=""></span>
        </div>
    </div> 
</div>

JQuery

$("body").click(function (e) {
    if (!$(e.target).closest(".popu").length.not(".tri")) {
        $("#s").hide(200)
    }
});

If anyone has any suggestions or solutions, I would greatly appreciate it!

javascriptjqueryhtmlcss

Answer №1

Instead of using a `.parent()` function, you can also utilize the .ancestor() method:

$('img.tri').click(function() {
    $(this).ancestor().hide();    
});

Alternatively, you can use the .closest() method as well:

$('img.tri').click(function() {
    $(this).closest('.popu').hide();    
});

Check out the Fiddle Demo here

Answer №2

Another option is to utilize:

$('.triangle').on('click', function(){
$('#square').hide();
});

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

Grid is failing to adjust its size to accommodate the width of the items

Is there a way to adjust the width of each grid box based on the content nested inside? For instance, in the case of the second testimonial where the item has a max-width of 500px, but the grid box remains unchanged. I attempted to set widths and max-wid ...

htmlcss

When utilizing the dispatch function with UseReducer, an unexpected error is triggered: Anticipated 0 arguments were provided,

Having trouble finding a relevant answer, the only one I came across was related to Redux directly. So here's my question that might be obvious to some of you. In my code, everything appears to be correct but I'm facing an error that says: Expect ...

javascriptreactjstypescript

Issue with page break functionality during print preview

div.pagebreak { page-break-after: always; page-break-inside: avoid; } HTML <!-- Page separator --> <div class="pagebreak" style="float: none;"><hr class="hidden-print" /></div> <app-mud-chec ...

htmlcssangulartypescriptpage-break

Pass the most recent properties to the mousemove event handler

I am currently developing a click-and-drag feature, which involves: setting up a moveListener on the onMouseDown event having the moveListener trigger an action that updates certain props of the component (props.whichChange) cleaning up the mouseUp event ...

javascriptreactjs

JavaScript method overloading involves defining multiple functions with the same name

In my JavaScript code, I have implemented method overloading using the following approach: function somefunction() { //1st function } function somefunction(a) { //2nd function } function somefunction(a,b) { //3rd function } somefunction(); // ...

javascriptjqueryoverloading

An effective method to utilize .map and .reduce for object manipulation resulting in a newly modified map

Here's an example of what the object looks like: informations = { addresses: { 0: {phone: 0}, 1: {phone: 1}, 2: {phone: 2}, 3: {phone: 3}, 4: {phone: 4}, 5: {phone: 5}, }, names: { 0 ...

javascripttypescriptloopsreducearray.prototype.map

Best practices for implementing dual ngFor directives within a single tr element?

Click here to view the page The image attached shows the view I want to iterate through two ngFor loops inside the tr tag. When using a div tag inside the tr, it's looping the button next to the tag instead of where I want it in the file table header ...

htmlangulartypescriptuser-interfaceangular-material

What is causing the malfunction in this code? (Regarding the key and value variable objects)

var elements = []; var attribute1 = $(index).attr('class'); //or any string var attribute2 = $(index).html(); //or any string elements.push({ attribute1: attribute2 }); When I run this code, the output I receive is: this Why am I unable to set ...

javascriptjquery

Customize the position of the Datetimepicker

Is there a way to customize the position of the datetimepicker, ensuring that it stays within the visual boundaries without getting cut off? I need help with this. ...

javascriptjqueryjquery-uidatepickerdatetimepicker

When incorporating Request.js and Cheerio.js into Node/Express, an unexpected outcome may occur where an empty

I am currently in the process of creating a basic web scraper using Request.js and Cheerio.js within Express. My main goal at the moment is to extract the titles of various websites. Instead of scraping each website individually, I have compiled them int ...

javascriptnode.jsexpressasynchronouscheerio

"Utilizing the Ajax ScriptManager for Effective Namespace Management

After incorporating my Ajax webservice into a namespace (MyCompany.Web.MyService), I encountered an issue where the proxy in Javascript is being regenerated as MyCompany.Web.MyService. Is it possible to change the name of the Javascript proxy to just MySe ...

javascriptajaxweb-servicesproxy

Combining various API requests within a Vue component, which includes a for loop

I'm delving into the world of API chaining, specifically trying to link two different API calls within a 'notes' Vue component. My knowledge of promises is basic at best, but I'm eager to enhance my skills in this area. The initial API ...

javascriptvue.jspromisevuexes6-promise

Exploring the power of pagination using Django and ExtJS

Extjs offers a gridpanel with pagination functionality, but I believe that the pagination only works once all the data has been received from the server (please correct me if I am mistaken). In my situation, the total amount of data from the server is 20MB ...

javascriptajaxdjangoextjspagination

Fill in a DropDown/Select menu according to the selection made in a separate DropDown menu

As a novice developer, I have encountered a challenge that has me stumped. My tech stack includes ASP.NET MVC with C# and some javascript technologies like JQuery and JSON. The task at hand involves populating a dropdown based on the selection made in ano ...

c#jqueryasp.net-mvcjsondrop-down-menu

Dimensions of images on Read the Docs (small image widths)

Using MkDocs along with the Read the Docs theme, I am facing an issue with small images not scaling properly on mobile devices. It seems like this problem is related to the CSS of Read the Docs theme, but I'm unsure how to override the default behavi ...

cssread-the-docsmkdocs

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

Despite receiving a return false from the Ajax verification, the form is still submitted when using onsubmit

I have implemented form verification using ajax to check for duplicate usernames. If a duplicate username is found, the function returns false; otherwise, it returns true. Below is the ajax code: function checkform(){ var username = $("#username").va ...

javascriptphpjqueryajaxforms

Retrieving the value of a nested element buried within multiple layers of other elements

There is a scenario I'm facing: <div class='situation1'> <div>..</div> <div> <span>...</span> <span>important details</span> </div> </div> Is there a w ...

jqueryhtmldomelement

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

cssresponsive-designbootstrap-5borderpseudo-element

Creating Angular Custom Form Validation and Custom Directives

I recently created a custom validation directive and applied it to the form element like this: <form myValidations> app.directive('myValidations', function(){ return{ //require: 'ngModel', note its commented out link: f ...

javascriptformsvalidationangularjscustomvalidator