We Keep Coding

Change parent element style with jQuery

I have next html setup:
<div class="one">
<div class="two">
Click
</div>
</div>
And I want to change background color for element with class .one when I click on element .three with jQuery.
This is what I was trying to use:
$(function(){
$('.three')(function(){
$(this).parent().parent().css('backgroundColor', 'red');
})
});
Here is a fiddle example: https://jsfiddle.net/Munja/a7unbs2p/
I was searching for solution here on SO but wasn't able to find it fast enough (probably I didn't look good enough :/).
Thank you.

you need to use .click() or .on('click') .. and you can use .closest() as well instead of using parent() twice
$(function(){
$('.three').on('click',function(){
$(this).closest('.one').css('backgroundColor', 'red');
})
});

Just add Click event at your code. First add jquery.min.js then add the script. You can do like this -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".three").click(function(){
$(this).parent().parent().css("background","red");
});
</script>

Since it's a descedant of the element, you can use .parents() which travels up until the selector is found.
Additionally, You can use the CSS syntax inside of the CSS method (background-color instead of backgroundColor).
$('.three').on('click', function(){
$(this).parents('.one').css('background-color', 'red');
})

I can't comment, so, little addition to higher answer:
$(function(){
$('.three').on('click',function(){
$(this).closest('.one').css('background-color', 'red');
})
});
Css doesn't have property with name backgroundColor

You can use something like this.
$('.three').on('click',function(){
$(this).closest('.one').css('backgroundColor', 'red');
})

Javascript get content of previous element

i've a question about 'this'.
With this i can get the content of actual element, but i want to get the content of previous element.
function deneme2(e){
alert(e.innerHTML);
}
Demo: http://jsfiddle.net/aldimeola1122/247m3xec/
Is there any function to get the content of child or parent element?
How can i achieve that?
Thanks in advance.

You can use previousElementSibling which gives the previous sibling element to the current element.
function deneme2(e){
alert(e.previousElementSibling.innerHTML)
}
DEMO

It isn't realy clear to me if you want the parent-element or the sibbling element. If you want the html of the parent element of e, you can use following code:
function deneme2(e){
alert(e.parentNode.innerHTML);
}
If you want the html of the child-element of e, you can use:
e.children[i].innerHTML
With i being the index of the element.

Check this:
function deneme2(e){
alert($( "#"+ e.id).prev().html());
}
Or try the post of Amit Joki. This is the same, but my post with using JQuery api.
DEMO

Add class to element that doesn't have class - jQuery

In the table below only one td has class, another doesn't have class like:
<table id="bow-me">
<tr class="row-me">
<td class="show-me">Pet is Great</td>
<td>Pete is Greate</td>
</tr>
</table>
I tried something like:
if(!$("#bow-me tr td").hasClass("show-me")) {
$(this).addClass("know-me");
}
But this doesn't add the class know-me in my second td here.
I have attached the JSFiddle here
If I want to add Class to the second td only then how do I do?

Try attribute selector and :not() to get the <td> without any class
$('#bow-me tr td:not([class])').addClass('know-me');
Or if you want to specify which <td> like first or second, use :eq()
$('#bow-me tr td:eq(1)').addClass('know-me');
Doc reference
:not()
Attribute selectors
.eq()

You can use :eq() selector:
$('#bow-me tr.row-me td:eq(1)').addClass('know-me');
Updated Fiddle
or .eq()
$('#bow-me tr.row-me td').eq(1).addClass('know-me');
Updated Fiddle

the reason your code doesn't work is because
There are multiple td's found with your selector
$("#bow-me tr td")
You can't use the $(this) as a selector inside your if conditional statement. it has no valid reference as is.
Solution: you can cycle through the matched elements via each() function and then set up your conditional to check each one of the elements found - $(this) would work in this case
$("#bow-me tr td").each(function() {
if(! $(this).hasClass("show-me")) {
$(this).addClass("know-me");
}
});
check out the jsFiddle here
I gave this answer as an explaination as to why your approach does not work.
I prefer Anton's approach that uses the :not() pseudo selector.

Combine after() and slideDown()

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:
$('.myDiv').after('<div>added content</div>');
How do I combine it with slideDown?

Try this instead :
$(".myDiv").after("<div style='display:none;'>added content</div>");
$(".myDiv").next("div").slideDown();
Good Luck !!

Try this out:
$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();

You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added
Try this
$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>');
$('.myDiv').next('.newDiv').slideDown();

first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">
then use a callback function to only start after the code was inserted in the document when you used the after() method.
$('.myDiv').after('<div class="newdiv">added content</div>', function(){
$('.newdiv').slideDown();
});

How to clear all <div>s’ contents inside a parent <div>?

I have a div <div id="masterdiv"> which has several child <div>s.
Example:
<div id="masterdiv">
<div id="childdiv1" />
<div id="childdiv2" />
<div id="childdiv3" />
</div>
How to clear the contents of all child <div>s inside the master <div> using jQuery?

jQuery's empty() function does just that:
$('#masterdiv').empty();
clears the master div.
$('#masterdiv div').empty();
clears all the child divs, but leaves the master intact.

jQuery('#masterdiv div').html('');

Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv. Then call empty() to clear the contents.
$('#masterdiv div').empty();
Using text('') or html('') will cause some string parsing to take place, which generally is a bad idea when working with the DOM. Try and use DOM manipulation methods that do not involve string representations of DOM objects wherever possible.

I know this is a jQuery related question, but I believe someone might get here expecting a pure Javascript solution. So, if you were trying to do this using js, you could use the innerHTML property and set it to an empty string.
document.getElementById('masterdiv').innerHTML = '';

jQuery recommend you use ".empty()",".remove()",".detach()"
if you needed delete all element in element, use this code :
$('#target_id').empty();
if you needed delete all element, Use this code:
$('#target_id').remove();
i and jQuery group not recommend for use SET FUNCTION like .html() .attr() .text() , what is that? it's IF YOU WANT TO SET ANYTHING YOU NEED
ref :https://learn.jquery.com/using-jquery-core/manipulating-elements/

If all the divs inside that masterdiv needs to be cleared, it this.
$('#masterdiv div').html('');
else, you need to iterate on all the div children of #masterdiv, and check if the id starts with childdiv.
$('#masterdiv div').each(
function(element){
if(element.attr('id').substr(0, 8) == "childdiv")
{
element.html('');
}
}
);

The better way is :
$( ".masterdiv" ).empty();

$("#masterdiv div").text("");

$("#masterdiv > *").text("")
or
$("#masterdiv").children().text("")

$('#div_id').empty();
or
$('.div_class').empty();
Works Fine to remove contents inside a div

You can use .empty() function to clear all the child elements
$(document).ready(function () {
$("#button").click(function () {
//only the content inside of the element will be deleted
$("#masterdiv").empty();
});
});
To see the comparison between jquery .empty(), .hide(), .remove() and .detach() follow here http://www.voidtricks.com/jquery-empty-hide-remove-detach/

When you are appending data into div by id using any service or database, first try it empty, like this:
var json = jsonParse(data.d);
$('#divname').empty();

$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});
or
$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});

try them if it help.
$('.div_parent .div_child').empty();
$('#div_parent #div_child').empty();