How execute script in specific div

Question

So, in dom like this

<div>
    <button>Click me</button>
    <img src=#>
</div>

<div>
    <button>Click me</button>
    <img src=#>
</div>

<div>
    <button>Click me</button>
    <img src=#>
</div>

And script

$("button").click(function() {img.hide() });

How to make js to be executed only in div which contains clicked button? dom is generated, so we cant use specific classes or id's

DOM is at tree. Every node knows what its parent is, and what children it has. The click event will speciflcally tell you WHICH of those buttons was clicked, and then it's a simple tree operation to move to the sibling img. — Marc B
– Marc B, Commented Mar 15, 2016 at 19:01

Ibrahim Khan · Accepted Answer · 2016-03-15 19:01:43Z

4

You can use parent() and find() methods.

$("button").click(function () {
    $(this).parent().find('img').hide()
});

Or next() method like following.

$("button").click(function () {
    $(this).next('img').hide()
});

edited Mar 15, 2016 at 19:01

answered Mar 15, 2016 at 18:56

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-15 18:57:17Z

1

Try to use .next() at this context,

$("button").click(function () {
    $(this).next('img').hide()
});

Since the image that we need to target is the next immediate sibling of the clicked button.

answered Mar 15, 2016 at 18:57

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Pabs123 · Accepted Answer · 2016-03-15 18:57:18Z

1

$("button").click(function() {
    $(this).siblings('img').hide(); 
});

This is only dependent on the current node's structure, and it doesn't matter if the image is before or after the button. You can read more about siblings() here, and a live code example here

answered Mar 15, 2016 at 18:57

Pabs123

3,43315 silver badges30 bronze badges

Comments

Aju John · Accepted Answer · 2016-03-15 18:58:28Z

1

I think you are looking for this..
$("button").click(function() {
    $(this).next('img').hide();
});

answered Mar 15, 2016 at 18:58

Aju John

2,2441 gold badge14 silver badges27 bronze badges

Comments

Adam Buchanan Smith · Accepted Answer · 2016-03-15 18:59:45Z

1

I think this is what you want, see fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/26/

HTML

<div>
 <button>Click me</button>
 <img src=#>
</div>

<div>
 <button>Click me</button>
 <img src=#>
</div>

<div>
 <button>Click me</button>
 <img src=#>
</div>

JQuery

$("button").click(function() {
    $(this).siblings('img').hide();
});

answered Mar 15, 2016 at 18:59

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

4 Comments

Pabs123 Over a year ago

I'm honestly curious, what's the purpose of posting my exact answer, which already has a live link, just 3 minutes later. I'm all for everyone posting different solutions to the same problem so that OP can choose what's best suited and future readers can have options, but what value does this add?

Sergiu Paraschiv Over a year ago

Maybe he worked on the answer for 10 minutes, 3 too late to be the first, and then decided not to trash it or maybe just didn't see yours. Nothing wrong in that. Let the upvotes decide :) IMHO none of these answers should have been written in the first place.

Adam Buchanan Smith Over a year ago

@SergiuParaschiv that is exactly what happened, its like you are a mind reader or something! lol

Adam Buchanan Smith Over a year ago

@Pabs123 when creating a fiddle on another page and coming back to SO, unless you refresh the page the "new" answer's will not apear, I am sorry you got all bent outta shape, was not my intention to post something you already did, however, it really doesn't matter. Cheer up buddy.

Collectives™ on Stack Overflow

How execute script in specific div

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related