We Keep Coding

js trigger click on a based on children element id

I want to trigger the click on a tag which has div with id='a'.
$(document).ready(function() {
$("#chat_list_content a:has(div[id='a'])").click();
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$('#chat_list_content a').click(function() {
alert('you are here');
})
})
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Click should happen automatically and output alert box. But, there is no respond from the code.
Thanks in advance.

When you call $("#chat_list_content a:has(div[id='a'])").click(), the custom click handler is not yet described yet. That means it doesn't do anything. You just need to move the click trigger below the click function definition:
$(document).ready(function() {
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$("#chat_list_content a").click(function() {
alert("you are here");
});
// Make sure to add this after the click handler definition above
$("#chat_list_content a:has(div[id='a'])").click();
});
working sandbox: https://codesandbox.io/s/exciting-gagarin-t55er

There is no need to use :has() here at all, you can simply use Attribute Equals Selector [name="value"] to achieve what you are looking for.
$(document).ready(function(){
$('#chat_list_content a').click(function(){
alert('you are here at '+ $(this).index());
});
$('#chat_list_content a div[id=a]').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>

Retrieving text in cascading elements

<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
In this code excerpt, I want to get only foo. But if I call $('.lorem').text(), I get div.ipsum also. (which I don't want it)
jQuery or Javascript, both are OK for me.

You are trying to get the text of the first child of the anchor so
var text = $('.lorem').contents().first().text();
snippet.log('text: ' + text)
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>

Use a span?
<a href='#' class='lorem'>
<span>foo</span> <div class='ipsum'>bar</div>
</a>
And then:
$('.lorem span').text()

How to remove elements of a certain class inside a parent element Jquery

I have a span that contains category buttons, and when clicked the subcategory buttons are added within the parent span. The purpose of it is that when the category button is clicked again, if the subcategories have already been populated, it should remove them, like so:
$('.catBtns').on('click', function() {
var catId = parseInt(this.id);
if ($('#' + catId).parent().find('button').length <= 1) {
$.each(data.category[catId].subcategory, function(i) {
$('<button class="subcatBtns" id="'
+ data.category[catId].subcategory[i].subcategoryId + '">'
+ data.category[catId].subcategory[i].subcategoryName.split('<--name-->')[currentLang]
+ '</button>').appendTo($('#' + catId).parent());
i++;
});
} else {
$('#' + catId).parent().remove('.subcatBtns');
}
});
So far no luck. Why am I unable to remove all elements of class subcatBtns from the parent element of the category button? The jquery API for the remove() method has this example:
$( "div" ).remove( ".hello" );
Is it because of the parent() method before it? Should I just add a specific Id to the span instead of selecting it through the ID of the child? The HTML is very simple, here:
<nav id="nav">
<img src="img/resources/logo.png" alt="logo" id="logoMenu">
<span id="span0" class="catSpan">
<button class="catBtns" id="0">EN-0</button>
<button class="subcatBtns" id="000">EN-000</button>
<button class="subcatBtns" id="001">EN-001</button>
</span>
<span id="span1" class="catSpan">
<button class="catBtns" id="1">EN-1</button>
</span>
<span id="span2" class="catSpan">
<button class="catBtns" id="2">EN-2</button>
</span>
<span id="span3" class="catSpan">
<button class="catBtns" id="3">EN-3</button>
</span><span id="span4" class="catSpan">
<button class="catBtns" id="4">EN-4</button>
</span>
</nav>

The .remove() method removes the elements on which it is called, optionally filtered by a selector. In the line
$('#' + catId).parent().remove('.subcatBtns');
You define a set of matched elements which contains only one element (the button container) and then call .remove() on this set with the selector ".subcatBtns". Since the container does not match the selector, nothing gets removed.
Try, instead:
$('#' + catId).parent().find('.subcatBtns').remove();

Set the HTML by calling using its ID or Class

I have a list of menus like
<ul id="toc">
<li>Description</li>
<li>Messages</li>
<li><a class="job_content">Applicants</a></li>
</ul>
Then i have a div like
<div id="job_item35116" class="items">
</div>
Then i have some more divs like
<div id="#description35116">
</div>
<div id="#msg_body35116">
</div>
So i am trying to do is when i will click the list item then these div (#description35116) will be appended inside id="job_item35116". (One item at a time)
So can i append a div with its ID inside another div ??
I tried like
JS (But its not working)
$('.job_content').unbind('click').click(function(){
var href = $(this).attr('href');
var id = $(this).attr('id');
var job_item = '#job_item'+ id;
if($(job_item).children().length > 0 ){
$(".items").empty();
$(href).toggle();
}else{
$(href).toggle();
}
return false;
});

Try this:
$('#toc li').on('click','a',function(e){
e.preventDefault();
var id = $(this).attr('href');
var div = $('<div id="' + id + '"></div>');
$(div).text(id);
$('.items').append($(div));
});
FIDDLE DEMO

Working solution: http://jsfiddle.net/aT7pF/1/
Remove the "#" from you ID-names in the div. It makes you live more easy.
From a coder perspective: Just place blank text within the </li>-tags. you don't need a <a href/>. Instead add a custom attribute to your tags, eg divId which you use to store the value of the </div>. it makes more sense this way. With JQuery you can fetch the value which you stored in your custom attribute easily with .attr()
(Refactored) HTML:
<ul id="toc">
<li divId="description35116">Description</li>
<li divId="msg_body35116">Messages</li>
<li>Applicants
</li>
</ul>
<div id="job_item35116" class="items"></div>
<div id="description35116">description35116</div>
<div id="msg_body35116">msg_body35116</div>
Javascript:
$("#description35116").hide();
$("#msg_body35116").hide();
var divId = $(this).attr("divId");
/*
you can make this line shorter:
$("#job_item35116").empty().append("<div>" +$("#"+divId).html() + "<div>");
*/
// by doing this:
$("#job_item35116").html("<div>" +$("#"+divId).html() + "<div>");

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle

if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;

This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here

Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.

Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}