We Keep Coding

Hide parent if child contains class

I followed this jQuery: Hide parent <td> if contains child <input> with specific class? but its not working in my code:
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('.view-count');
}).hide();
});
https://jsfiddle.net/xzeeuotL/

Two things to fix but you were close.
1) You did not include Jquery as a library for the JSFiddle
2) In the hasClass method you need to remove the . in the class name
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('view-count');
}).hide();
});
Here is a working fiddle
https://jsfiddle.net/rn2jzpfc/

You were close. Just one mistake in your code.
When you are checking if something hasClass there is no need to have the . preface it.
Also remember you need to include jquery.
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('view-count');
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-list-item">
<span class="view-count">HIDE THIS</span>
</div>
<div class="video-list-item">
<span>DON'T HIDE THIS</span>
</div>
You can do this without Jquery
Here is an example using pure javascript.
var divSel = document.querySelectorAll('.video-list-item > .view-count');
for (var i = 0; i < divSel.length; i++) {
divSel[i].parentElement.style.display = "none";
}
<div class="video-list-item">
<span class="view-count">HIDE THIS</span>
</div>
<div class="video-list-item">
<span>DON'T HIDE THIS</span>
</div>
Hope this helps.

The next code returns the parent with video-list-item class of elements with view-count class; then hide the parent. I thinks it's more easy than your approach:
$(".view-count").closest('.video-list-item').hide();
Updated JSFiddle: https://jsfiddle.net/tomloprod/xzeeuotL/2/

Another solution:
$(function() {
$('.video-list-item').find('span.view-count').hide();
});

You have to change that syntax for your case.
you have to be sure that your <td> has a class name like ".video-list-item" and later change in the $('span', this) for $('input', this), of course, you input would has a class name like view-count. something like this..
$(function() {
$(".video-list-item").filter(function() {
return $('input', this).hasClass('view-count');
}).hide();
});
<td class="video-list-item">
<input class="view-count">
</td>
i hope it can help you.. nice day!!

Useful thing if you want to remove closest parent that contains child with specific class:
<div class="closest_parent">
<div></div>
<div class="child_class"></div>
</div>
$('.child_class').closest('.closest_parent').remove();

Jquery Remove Div and Alert is not Working

I have a following code, i want to remove label and Input Box on click, but it is not working
no any alert is shown, nothing is seen over the console.. really disappointed
<div id="Div1" class="span5 well droppedFields ui-droppable ui-sortable">
<div class="draggableField ui-draggable droppedField" style="z-index: 10;" id="CTRL-DIV-1002">
<div style="z-index: 11;"><span id="LabelU2">LastName : </span></div>
<div style="z-index: 12;">
<input name="LastName" type="text" id="LastName"></div>
</div>
</div>
my jquery
$('.draggableField ui-draggable droppedField').on('click', function () {
$(this).parent('div.DivHTML').remove();
alert("hi");
});
Help is apperciable. thnx

Your selector doesn't point to anything. There is no draggableField that has a child ui-draggable that has a child droppedField. Do you mean a div that has all three classes?
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).hide();
alert("hi");
});
UPDATED CODE: Removed the OP code to remove() element and replaced with hide()

Take a look to this Fiddle
$('.draggableField').on('click', function() {
$(this).find("input").remove();
$(this).find("#LabelU2").html('');
});

you don't have DivHTML in there:
use:
$(document).ready(function(){
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).parent('div').remove();
alert("hi");
});
});

Can we see more details on your project? If it's working in jsfiddle but not in your project it seems like something else is missing. Are you loading jquery or your specific script into your html page properly? To get down to the problem we need more to go off of.

jquery and css solution to toggle show/hide with text in the html

So I created the following jquery that shows/hides a div.
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").hide();
});
$("#show").click(function(){
$("#me").show();
});
});
This is some text
Hide
Show
http://jsfiddle.net/6DTeq/7/
It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide.
But main problem is I dont want to have the text in the javascript file for internationalization purposes.
It's ok if the text resides in the html. Can someone help me with this?

Html :
<div id="me"> This is some text</div>
<div id="toggle">toggle</div>
Js:
$("#toggle").click(function(){
$("#me").toggle();
});
Demo -----> http://jsfiddle.net/6DTeq/8/
Updated fiddle -----> http://jsfiddle.net/6DTeq/13/

Try this
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").toggle();
$(this).text(function(i, val) {
return val === 'Show' ? 'Hide' : 'Show';
});
});
});
Check Fiddle

<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
<div id="hide" style="display:none;">Hide</div>
<div id="show">Show</div>
</div>
$(document).ready(function(){
$("#clickContainer").click(function(){
$("#me").toggle();
$("#hide").toggle();
$("#show").toggle();
});
})

Try that:
http://jsfiddle.net/6DTeq/10/
$(document).ready(function () {
$("#toggle").click(function () {
$("#me").toggle();
$(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
}).triggerHandler('click');
});

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.

So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});

try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});

Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});

to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.

$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});

You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.

Affect another element in current outer element

<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Blah</div>
</div>
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Another</div>
</div>
When button gets clicked, I want .example to .show, but only the .example that's in the current .test.

Another way that works for your particular HTML:
$('button').click(function(){
$(this).next('.example').show();
});

This will do exactly what you said:
$('button').click(function(){
$(this).closest('.test').find('.example').show();
});
This works too for the markup you posted, but it won't work if the button and .example are not siblings:
$('button').click(function(){
$(this).siblings('.example').show();
});

Hiya Working demo for your case here: http://jsfiddle.net/4bLZF/
this uses slideToggle http://api.jquery.com/slideToggle/
code
$(document).ready(function () {
// Watch for clicks on the "slide" link.
$('button').click(function () {
$(this).next(".example").slideToggle(400);
return false;
});
});​