We Keep Coding

Remove children with defined attribute - not working

Trying to remove children DIV elements of a parent with certain attribute. I have it half working, but with the below code, it doesn't find the children
HTML
<div id="PremiumGiftContainer" class="PremiumGiftContainer">
<div class='message' is-vip='false'>
<p>FALSE</p>
</div>
<div class='message' is-vip='false'>
<p>FALSE</p>
</div>
<div class='message' is-vip='true'>
<p>TRUE</p>
</div>
</div>
<button id="button">Remove</button>
JQUERY
$("button").on("click", function(){
remove_element();
})
function remove_element(){
$('#PremiumGiftContainer').children(function () {
$("[is-vip]").each(function(){
if($(this).attr('is-vip')=='true'){
$(this).fadeOut();
}
});
})
}
FIDDLE
If I remove the $('#PremiumGiftContainer').children... section, it works, but I was trying to limit the scope of the search that needs to happen to find the correct switches.
Is what I'm trying to do achievable?

children() does not accept a function, it takes a selector. As such you can simply use an attribute selector and then call fadeOut() on the resulting elements.
Also note that you should not create your own non-standard attributes on elements. If you want to store custom data with an element, use a data-* attribute.
$("button").on("click", function() {
remove_element();
})
function remove_element() {
$('#PremiumGiftContainer').children('[data-is-vip="true"]').fadeOut();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PremiumGiftContainer" class="PremiumGiftContainer">
<div class="message" data-is-vip="false">
<p>FALSE</p>
</div>
<div class="message" data-is-vip="false">
<p>FALSE</p>
</div>
<div class="message" data-is-vip="true">
<p>TRUE</p>
</div>
</div>
<button id="button">Remove</button>

Can do this with one selector using an attribute selector
$('#PremiumGiftContainer > [is-vip=true]').fadeOut()
DEMO

How to get the text of the inside element of the next div using jquery?

I have two divs... Then when I clicked the 1st div, i want to get the text inside of h3 of the 2nd div
Here is my codes... But none of the jquery code is working.. any help to fix my code, please... thanks
HTML
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>
JQUERY / JAVASCRIPT
$('.timeline-badge').on('click', function() {
alert($(this).closest(".timeline-panel + div + h3").text());
alert($( '.timeline-badge > div:eq(0) + h3:eq(0)' ).children().text());
alert($(this).nextAll( '.timeline-heading').eq(0).innerhtml);
});
http://jsfiddle.net/rK4qc/119/

The .timeline-panel is next sibling of .timeline-badge. So you should use .next() to selecting it. Then use .find() to finding .timeline-title in it.
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>

Use Jquery's siblings selectors https://api.jquery.com/siblings/
$('.timeline-badge').on('click', function() {
console.log($(this).siblings());
});

Go get it by the class name of h3
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});

You can get the value of your h3 tag with:
$('div.timeline-panel div.timeline-heading h3.timeline-title').val();

use this code.
$(document).on("click",".timeline-badge",function() {
alert("H3 IS " + $('h3.timeline-title').text());
});
and check this fiddle for the code.
http://jsfiddle.net/rK4qc/121/
For the second div just add div for it and get the text user the .text() function.

this will work for you:-
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});

Using $(this) when selecting a div

I have a series of divs all of the same class with no IDs. I want to change the background of the div when it is clicked. I tested the function and it works fine. But when I access the element as this, it is not working. Question is how to get buttonpressed() to work only for the div clicked on?
HTML
<div id="navbar">
<div class="navitem" onclick="buttonpressed()"><p>Membership</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Certification</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Foundation</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Seminars</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Councils</p></div>
</div>
Javascript
function buttonpressed() {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
}

Since you're using jQuery you can (and should) remove the inline event handling and just use:
$( document ).ready(function() {
$('.navitem').click(function(){
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
})
});
jsFiddle example

When using HTML inline event handlers, this references your window. If you instead attach an event handler through JavaScript, it will work as expected:
$(".navitem").on("click", function () {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
<div class="navitem"><p>Membership</p></div>
<div class="navitem"><p>Certification</p></div>
<div class="navitem"><p>Foundation</p></div>
<div class="navitem"><p>Seminars</p></div>
<div class="navitem"><p>Councils</p></div>
</div>

You could get access to this if you change how you're catching the event:
$('.navitem').on('click', function() {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
})
HTML
<div id="navbar">
<div class="navitem" ><p>Membership</p></div>
<div class="navitem" ><p>Certification</p></div>
<div class="navitem" ><p>Foundation</p></div>
<div class="navitem"><p>Seminars</p></div>
<div class="navitem" ><p>Councils</p></div>
</div>

As mentioned in the comments, one way to do this would be:
$('.navitem').click(function(){
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
});
Check: https://api.jquery.com/click/
Also keep in mind, that the code above will bind this function to all elements with the css-class "navitem". In case you do not know, what this means you might check as well: https://api.jquery.com/category/selectors/

$(".navitem").click(function(){
$(this).css('background-image', 'url(https://www.google.pt/images/nav_logo195.png)');
});
Demo:
http://codepen.io/tuga/pen/bdddGa

If you happened to want a pure JS solution and if you want to keep your inline onClick listeners, you could do this..
HTML
<div class="navitem" onclick="buttonpressed(this)"><p>Membership</p></div>
JS
function buttonpressed(element) {
var bgString = "url('navbuttonpressed.png')";
element.style.backgroundImage = bgString;
}
The this keyword passes the element that called the function through to the method itself.
This works well - JSFiddle

Jquery Get Child DIV Within DIV

I have the following HTML code within the body:
<div id="hidden">
</div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
I am using the following code to get the child
$("div:first-child").attr('id')
But this returns "hidden" when I want it to return firstChildDiv, I have tried things like...
$("div[mainContainer ] div:first-child").attr('id')
$("div[id=mainContainer ] :first-child").attr('id')
$("#mainContainer :first-child").attr('id')
I know its a simple thing to do, but cant seem to see where I am going wrong...
Thanks

Your last selector
$("#mainContainer :first-child").attr('id')
works fine, if you correct the typo in the HTML (see this fiddle). It says mainContianer instead of mainContainer.
But, anyway, why don't you select simply by the id, if that element has an id?
$( '#firstChildDiv' )

$('#mainContainer > div:first-child').attr('id');

Try this,
$("#mainContianer:first-child").attr("id")
Check there is no space before ':'

Actually, you have a typo there in your html
<div id="mainContianer">
should be
<div id="mainContainer">
Then you can do
$("#mainContainer div:first-child").prop('id')
This uses prop rather than attr, which is slower and old jQuery Syntax

This is working for me....
$(document).ready(function(){
var a =$("#mainContainer div:first-child").attr('id');
alert(a);
});

this all return you first child of parent--in your case replace parent by mainContianer
$('#parent').children(":first")
$('#parent').children(":first-child")
$( $('#parent').children()[0] )
$('#parent').find(":first")
$('#parent').find(":nth-child(1)")
try - Child Selector (“parent > child”)
$("div > div").attr('id')
also try out
$("div div:first-child")

<html>
<head>
<script>
function getDiv(){
alert("answer = "+$('#mainContianer div:first-child').attr('id'));
}
</script>
</head>
<body>
<div id="hidden"></div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
<button onclick="getDiv()">click</button>
</body>
<html>

SCRIPT
<script language="JavaScript">
jQuery(document).ready(function($) {
$("#MY_BUTTON").click(function(event) {
$("div#PARENT_DIV").find("#CHILD_DIV").hide();
});
});
</script>
HTML CODE
<div id="PARENT_DIV">
<h1 class="Heading">MY HTML PAGE TEST</h1>
<br />
<div id="CHILD_DIV">THIS IS MY CHILD DIV</div>
</div>
<div class="MY_BUTTONS">
<a class="MySubmitButton" id="MY_BUTTON">
<span>Test it!</span>
</a>
</div>

for now in 2020 with jquery it can be like:
function myClickOnDiv(divPrm) {
let div=$(divPrm);
let targetElement=div.find('#my_id')
}
if say you div looks like this:
<div onclick=myClickOnDiv(this)><label id="my_id"></label></div>

Select div children

I want to select the child of a div using jquery. I try with children() but didn't work
<div class="main" id="this_456" onclick="change(456)">
<div id="title">some text</div>
<div id="body">some text as well</div>
</div>
javascript
function change(id)
{
$('#this_'+id).children("#body").fadeOut();
}

Your code works if you specify 456 as the argument rather than this_456 (see: http://jsfiddle.net/aLxTz/).
However, since <div id="body"/> is identified by ID (#body) it's redundant to look for it inside and other element - it should be unique document-wide. Use the class="" attribute if you expect to have several instances of a body <div/>, e.g. <div class="body">...</div>.
Furthermore, note that the onclick handler has the this variable set to the context element. Since this is the element in question itself, you could write
<div class="main" id="this_456"> ... </div>
$(".main").click(function() {
$(this).chlidren(".body").fadeOut();
});

<div class="main" id="this_456" onclick="change(this)">
<div id="title">some text</div>
<div id="body">some text as well</div>
</div>
function change(elm) {
$(elm).children("#body").fadeOut();
}
FIDDLE

Try this code:
function change(id) {
$('#this_'+id+ ' > div').find("#body").fadeOut();
}