Develop Reference

Get parent div id name when inner div clicked

I am struggling to find a way to get the name of the parent ID in a string. The code is part of a chat app written in Javascript and jQuery. Each time someone enters a message, the string outputs a block with username and text with a Close-x box before the username. When someone clicks the Close-x, it needs to grab the ID name of the parent div(json.innerdiv). The div with ID named json.outterdiv is the ID which allows me to delete the whole block message where as the json.innerdiv allows me to remove text, change text or just hide/show text. I tried searching on here for answers but all I ever get is undefined or null results.
My code:
var bubble = $('<div class="bubble-container" id="'+json.outterdiv+'"><span class="bubble"><div class="bubble-text" id="'+json.innerdiv+'"><p><div class="close-x" onclick="DelBubble(this)"></div>Some text</p></div></div>');
function DelBubble(clicked_id) {
alert($(this).parent().attr('id'));
}

Pass the event to onclick then get the closest of a class selector using jquery:
var bubble = `
<div class="bubble-container" id="2">
<span class="bubble">
<div class="bubble-text" id="3">
<p>
<div class="close-x" onclick="DelBubble(event)">
Close
</div>
Some text
</p>
</div>
</div>`;
$('body').append(bubble)
function DelBubble(e) {
const bubbleTextId = $(e.target).closest('.bubble-text').attr('id');
const bubbleContainerId = $(e.target).closest('.bubble-container').attr('id');
console.log({bubbleTextId,bubbleContainerId})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery check divs has a class and unwrap if no other class

I have two div's and what I am trying to do is loop through all the divs to check if the div has a class jsn-bootstrap3, I'm also trying to check to see if the div has any other classes, if it doesn't then I'd like to remove the jsn-bootstrap3 div so that the child content is whats left.
<div class="jsn-bootstrap3">
<div class="wrapper">
Div one
</div>
</div>
<div class="jsn-bootstrap3 block">
<div class="wrapper">
Div two
</div>
</div>
$('div').each(function() {
if ($(this).hasClass()) {
console.log($(this));
var class_name = $(this).attr('jsn-bootstrap3');
console.log(class_name);
}
});
jsFiddle

You can try something like
$('div.jsn-bootstrap3').removeClass('jsn-bootstrap3').filter(function () {
return $.trim(this.className.replace('jsn-bootstrap3', '')) == ''
}).contents().unwrap();
Demo: Fiddle
use the class selector to find div's with class jsn-bootstrap3 because we are not goint to do anything with others
use filter() to filter out div's with any other class
use unwrap() with contents() to remove the wrapping div

hide all but one element of certain class in Jquery

I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});

Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});

Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/

Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example

Filtering by Child Div not working

I am trying to filter div elements by looking at the id of a child element, however I can't seem to get it working and can't spot why.
the html:
<div class="section-link" id="section-tooltip">
<div class="brand tp" style="display: none;"></div>
contents
</div>
<div class="section-link" id="section-tooltip">
<div class="brand garden" style="display: none;"></div>
contents
</div>
The js:
function brand(string){
var brand = string;
$('.section-link').hide();
if ($(".section-link").children('.brand').hasClass(brand)) {
$(this).parent().show();
}
}
I am then executing the following via chrome browser: javascript:brand("tp");
it hides all the div's however it does not show the one with the tp element inside

$("this") is wrong.
$(this) //this is right
Edit. Another one:
it isn't
.hasclass()
but
.hasClass()

this piece of code:
if ($(".section-link").children('.brand').hasClass(brand)) {
$("this").parent().show();
}
should be change to this:
$(".section-link").children('.brand').each(function(){
if($(this).find(brand).length > 0){
$(this).find(brand)[0].parent().show(); //assuming onlt the first 'tp's parent needs to be shown
}
});
PS: this needs no enclosing quotes

Changing text when unrelated divs are empty

I have the div event_wrapper that can be dynamically added on a page by clicking the link in add-event. The user can delete/add these divs as many times as they want. If the user chooses to delete all of these event_wrapper divs, I want to change the text inside add-event. Here is the HTML:
<div class="event_wrapper">
<div class="event">
<div class="well darkblue-background pull-left">
<a class="close tooltip" data-tooltip="Delete this event"><i class="icon-remove"></i></a>
</div>
</div>
</div>
<div class="add-event pull-left">
And Then...
</div>
(I am using jQuery) I tried using :empty selector, but it does not seem to be working. Any suggestions? Thanks!

Have a look at - https://stackoverflow.com/a/3234646/295852
And then use contentChange() like:
$('.event-wrapper').contentChange(function(){
if($(this).children().length > 0){
// events exist
$(".add-event pull-left").children('a').html('And Then...');
} else {
// no events
$(".add-event pull-left").children('a').html('your text');
}
});

if($(".event-wrapper").html() == null) {//looking inside event-wrapper; if it contains any thing
$(".add-event a").html("whatever");
}

if(!$(".event_wrapper")){
$(".add-event pull-left").html("Whatever text you want here"); //changes the text of the div
//or
$(".add-event pull-left").children('a').html("whatever text you want here"); //changes the text of the anchor child
}