Develop Reference

On click button apply event only for it top ancestor

I'm recently learning JS/jQuery and I need help to apply a particular style/class to the top div when click the button inside it, but the problem is that the html has different sections with the same button and the same class on ancestor, and I want it to only apply to the actual div that contains the triggered button.
HTML:
<div class="class">
<div>
<div>
<button data-action="action">
<div class="class">
<div>
<div>
<button data-action="action">
SCRIPT:
$('[data-action="action"]').click(function() {
$(".class").addclass("new-class")
})
With this code obviously new-class is applied to all existing class classes regardless of the activated button.
Thanks!

Use the below code :
$('[data-action="action"]').click(function() {
$(this).closest('.class').addclass("new-class")
})

Use the "closest" which selects the first ancestor with a selector passed (in this case, first ancestor with "class" classname). The $(this) selector applies to the specific element that is clicked, in this case.
$('[data-action="action"]').click(function() {
$(this).closest(".class").addclass("new-class")
})

You can find the parent for the clicked element like this:
$('[data-action="action"]').click(function() {
$this.parents(".class").addclass("new-class")
})

You can provide id for the div along with class as..
<div class="class" id = "my_id">
<div>
<div>
<button data-action="action">
<div class="class">
<div>
<div>
<button data-action="action">
SCRIPT:
$('[data-action="action"]').click(function() {
$("#my_id .class").addclass("new-class")
})
try this it will work

Remove the next element together with the selected one in jquery

I am bulk deleting all div elements with the id that starts with leg-:
$('div[id^="leg-"]').remove();
I also want to delete <hr> element that comes after each div:
<div id="leg-1">
...
</div>
<hr>
There is no event fired that's why, I am unable to select the element like this:
$(this).next();
How can I do this?

You can cache the selection made by jQuery in an intermediate variable like following:
var selection = $('div[id^="leg-"]');
selection.next().remove();
selection.remove();
Like in the $(this) methodology you wanted to use, the variable selection now contains a reference to all the divs you want to remove. Calling next() on that selection returns the immediate sibling, thus the hr you want to delete, for each of those div.
In general: Wherever you need the same selection in jQuery twice, consider saving it to a variable to speed up your scripts and reduce DOM querying to a minimum.

You can select next hr of div using .next() and use .addBack() to adding div to jquery selector.
$("div[id^=leg-]").next().addBack().remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">leg-1 text</div>
<hr>
<div>text</div>
<div id="leg-2">leg-2 text</div>
<hr>
<div>text2</div>

Try this First remove next <hr> element the remove selection element
$(document).ready(function(){
var selection = $('div[id^="leg-"]');
selection.next('hr').remove();
selection.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">
1
</div>
<hr>
<div id="leg-2">
2
</div>
<hr>
<div id="">
3 not leg
</div>
<hr>

You could remove the hr by combining the jQuery next and remove functions in this way:
$(function() {
$('div[id^="leg-"]').each(function(i, v) {
$(v).next("hr").remove();
$(v).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leg-1">#leg-1</div>
<hr>
<div id="not-leg-1">#not-leg</div>
<hr>
<div id="leg-2">#leg-2</div>
<hr>

You are not removing the next element only selecting it.
Please to also add: $(this).next().remove(); before removing the div element.
You can use jQuery.each(): https://jsfiddle.net/cdzswdrk/1/
// when document ready
$('div[id^="leg-"]').each(function(){
var $this= $(this);
$this.next().remove();
$this.remove();
});

Find third parent from a parent-child in jquery

<div>
<div>
<div class="one">child of 1 st Div</div>
</div>
<div>
<div class="two'>child of 2 st Div</div>
</div>
<div>
<div class="three">child of 3 st Div</div>
</div>
</div>
Here what I want to do is on clicking the div with class="one" I want to change the content of the third div where class="three"

You have a typo error here : <div class="two'> it should be this : <div class="two">
For the script, there are many way to do it, here is one :
$(function(){
$('.one').click(function(){
$('.three').text('hey');
});
});
Live example

In jQuery, you can attach a click event handler to a jQuery object using the click method. You select an element using the global jQuery function (usually jQuery or $). To select an element with a specific class, prepend . to the class.
$('.one').click(function(event) {
// this function will be fired when the div with class `one` is clicked
var $three = $('.three');
// $three is now a jQuery object representing the div
// DOM element with the class `three`
// your code here
});

First of all in your code you should correct your code for class = "two". In order to select a div use jquery .on() event handler.
$('selector').on('click',callback());
Refer to the following code.
$('.one').on('click',function(){
$('.three').addClass('changeColor');
})
I have also created a jsFiddle: https://jsfiddle.net/58kng68a/

this find parent of another div and toggle its child using jQuery

I've done some research and nothing seems to be working. Here is the HTML followed by the JavaScript I am putting together. What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row. Each block of code exists multiple times at different locations on the page. I tried using this, find, parent, next and children to no avail.
HTML:
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block (etc..)
JS:
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).parent('.content_block_holder').find('.hidden_options_row').toggle();
});
});

Try using closest([selector]) ( http://api.jquery.com/closest/ ) instead of parent in your selector. It will traverse up the tree and find "content_block_holder". parent([selector]) will just check the immediate parent and return an empty set if it doesn't match the selector provided.
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).closest('.content_block_holder').find('.hidden_options_row').toggle();
});
});
JSFiddle based on your code: http://jsfiddle.net/gK7yM/

try this
$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();

Also this chain works:
$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();
or
$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();

Detecting clicks inside a div using wildcards in jQuery

I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class

I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.

Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});