We Keep Coding

Get div value from class name

I have a very large HTML that contains lots of divs with the same name, I want a way to only filter or extract that value from that div.
Here is an example:
<td class="last">
<div class="container-relative">
<div class="name" title=""User" <John Appleseed>"></div>
<div class="date">9/17/2019</div>
<div class="tool"></div>
</div>
</td>
I need to extract only what's between <John Appleseed>, in this case is 'John Appleseed'.

You could use querySelectorAll to take all the elements with class name, then get the title attribute with getAttribute, and finally use a regular expression to match text between <>.
document.querySelectorAll('.name').forEach(item => {
let title = item.getAttribute('title');
console.log(title.match(/\<.*\>/));
});
<td class="last">
<div class="container-relative">
<div class="name" title=""User" <John Appleseed>"></div>
<div class="date">9/17/2019</div>
<div class="tool"></div>
</div>
</td>

var divs=[];
for(i=0,j=0,obj=document.getElementsByClassName("name");i<obj.length;i++)
if(obj[i].title.includes("John Appleseed") &&
/* obj[i].title.split("\"")[2].trim()=="<John Appleseed>" && */
obj[i].tagName.toLowerCase()=="div"){
divs[j++]=obj[i];
}
console.log(divs);

separate your div using div ID. Then get your respective div using that value of ID. Then in javascript you can use getElementByID.

You can use Xpath,
.//div[contains(#class, 'Test')]
Then extract you required text from it.

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

jQuery select another element with certain class in same parent

let say i have this div
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>
I wanted to give the #button an on click event that returned the text at #lookAtMe div, specific to the div whom it shares parent/grandparent (in this case, the #parent div)
I tried using:
$("#button").on("click",function(){
var ReturnedText = $(this).parent(".lookAtMe").text();
console.log(RetrunedText);
});
But the console log would retruned (empty string).
Where did i do wrong? please help. Thankyou very much.

Because there is n o parent with that class. You need find().
Actually you need to write
var ReturnedText = $(this).parent().find(".lookAtMe").text();
$("#button").on("click",function(){
var ReturnedText = $(this).parent().find(".lookAtMe").text();
console.log(ReturnedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</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();
}

Accessing a inner div value in javascript, with no ids to help

I have following structure
<div onClick="javascript:Myfunction('value');">
<div title="Mytitle"> </div>
</div>
Can I access in the javascript Myfunction, the title of the inner div.
There are no ids here.

If you do not want to change the html code then you can use this.
function MyFunction ( elem )
{
var child = jQuery(elem).find("div");
alert ( child.attr("title") );
}
<div onclick="MyFunction(this);">
<div title="Mytitle"> </div>
</div>
Otherwise try this
$(document).ready ( function () {
$('#divMain').click(function() {
var titleElem = $(this).find("div");
alert ( titleElem.attr("title") );
});
});
<div id="divMain" style="width: 100px; height: 100px;">
<div title="Mytitle">
</div>
</div>

Depends if you use any JavascriptLibraries like jQuery. If you do, you can select your objects via CSS selectors, which would be in your case
$('div[onclick] > div[title]')
You'd get your inner DIV element with it. If there are more elments that match this criteria, you could limit them even more by attribute values.

If it's the only div with the title you can use this selector:
$('div[title]')
The easiest solution would to add a class or id to the div with onClick defined (I suggest moving onlick to JS code as well)
<div class="myClass">
<div title="MyTitle"> ... </div>
</div>
And in JS:
$('.myClass').click(function() {
MyFunction('value');
});
Then you can find inner div with
$('.myClass div')