Develop Reference

Hide labels of empty elements

I have the following markup, which is repeated 14 times on my page. Each section is a little different, but includes a internal/external label, which has a class="sectionLabel". If the div that is immediately under the section label is empty, I need to hide the section label. Below is what I have tried that does not work...it hides all section labels. How can I hide only the section labels where the corresponding div does not have any children?
<div class="column1">
<span id="internalOutputsLabel1" class="sectionLabel">Internal Outputs</span>
<div id="internalOutputStrategicPlanningPhase1" class="linkHolder"> <!-- If empty, hide the label above -->
</div>
<span id="externalOutputsLabel1" class="sectionLabel">Extenal Outputs</span>
<div id="externalOutputStrategicPlanningPhase1" class="linkHolder"> <!-- If empty, hide the label above -->
</div>
</div>
What I've tried:
$(".linkHolder").each(function (i) {
if ($(this).empty)
{
$(".sectionLabel").hide();
}
});

You can just filter it like this
$('.sectionLabel').filter(function() {
return $(this).next('.linkHolder').is(':empty')
}).hide();
Note that jQuery's $(element).empty() does something else, it empties the element, removing all it's content.

You almost made it:
$(".linkHolder").each(function (i) {
if ($(this).html() == '')
{
$(this).prev().hide();
}
});

You can try this:
$(document).ready(function() { $('div:empty').remove(); });

Jquery Html Element Selector

I have a HTML code like this,
<div class="panel-footer">
<div class="post-activity">
<i class="loading-icon"></i>
<button onclick="ChangeColor(this);">Change Color</button>
</div>
<div class="comments-ch"></div>
</div>
When I write this Jquery code
function ChangeColor(element)
{
$(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000")
}
Not working for class = comments-ch,
But If I write this code like this,
function ChangeColor(element)
{
$(element).closest(".panel-footer").find(".post-activity").css("background-color","#CC0000")
}
working.
Summary, first div under the "panel-footer" is OK, but the second/last div NOT OK.
How can i reach the second/last div element? Thanks

Try .show() after setting the CSS:
function ChangeColor(element) {
$(element).closest(".panel-footer").find(".comments-ch").css("background-color", "#CC0000").show()
}

When using a class selector, make sure you specify a period in front.
For example, in:
$(element).closest(".panel-footer").find("comments-ch").css("background-color","#CC0000")
Change from find("comments-ch") to find(".comments-ch")

JQuery : Remove class, not child content

I use jQuery to append the content into each contentx class like.
<div id="sidebar">
<div class="contentx"></div>
<div class="contentx"></div>
</div>
<script>
$("#sidebar .contentx").each(function()
{
//Append here
}
</script>
After Append I have, for example :
<div id="sidebar">
<div class="contentx">
something 1 is inserted here.
</div>
<div class="contentx">
something 2 is inserted here.
</div>
</div>
but I want to remove class="contentx" whenever the content is appended. This mean I have only :
<div id="sidebar">
something 1 is inserted here.
something 2 is inserted here.
</div>
How

Option 1
If you just want to remove the class "contentX" from the div after the content has been added, you can try the following:
$('#sidebar .contextX').each(function () {
// Append here.
}).removeClass('contextX');
EDIT: Seems I misread the question a little (based on your indicated desired output).
Option 2
If you want to remove the entire element and replace it with the content of your choice? For that, you can try:
$('#sidebar .contextX').each(function () {
$(this).replaceWith('<new content here.>');
});
jQuery replaceWith

Besides the append, call removeClass
$("#sidebar .contentx").each(function()
{
//Append here
$(this).removeClass('contentx');
}

Try this
var tmp = $(".contentx").html();
$('.contentx').append(tmp);
var tmp2 = $(".contentx").html();
$('.contentx').remove();
$('#sidebar').append(tmp2);

Hiding the closest div with the specified class

I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,

The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree

You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here

This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()

How to change a span's content when other element is clicked

I am looking to change the content of this span tag:
<span class="ui-btn-text" id="btnText">Read how we have helped</span>
To:
<span class="ui-btn-text" id="btnText">Hide Story</span>
This is what I got so far:
$('#storyBtn').click(function() {
$('#story-body').slideToggle('fast', function() {
$('#btnTextShow').hide();
$('#btnTextHide').show();
});
});

I think you just want to update the text of the span ... if so try this ->
<span class="ui-btn-text" id="btnText">Read how we have helped</span>
$('#storyBtn').click(function() {
$('#story-body').slideToggle('fast', function() {
$('#btnText').text("Hide Story");
$('#btnTextShow').hide();
$('#btnTextHide').show();
});
});
*Untested

Here is a great example on how to achieve this:
First look at the JSFiddle DEMO
Let's see what we have here:
$('.ui-btn-text:eq(1)').hide();
$('#storyBtn').click(function() {
$("#story-body").slideToggle(400);
$(".ui-btn-text").toggle(300);
});
And the html:
<div id="storyBtn">
<span class="ui-btn-text">Read how we have helped</span>
<span class="ui-btn-text">Hide Story</span>
</div>
<div id="story-body">
A long,...<br> long time ago...
</div>
INFO:
As you can see I simplified and removed all the unnecessary ID's and codes JUST TO MAKE VISIBLE HOW SIMPLE CAN ALL BE. You can redo this changes of mine.