Develop Reference

unable to remove a dynamically created Div

I am dynamically creating a div using jquery named "sampageswrapper", the thing is that I want to check if the div name sampageswrapper is already created then delete it.
<div id="container2" class="container" style="width:600px; height: 700px" name="container2">
Enter Color Name and use + to add more colors:
<input id="byname" type="text" name="byname">
<br>
<br>
<div class="sampageswrapper">
<div class="pagenumbering" align="center" style="clear: both; margin-top:12px; color:#FFF">
<div class="buttons">
</div>
<div class="pagecount" align="center">
</div>
<div class="sampageswrapper">
</div>
And following is my JS/Jquery Code
if ($("#sampageswrapper").length > 0) {
jQuery('#container2').find('#sampageswrapper').remove();
//i also tried jQuery('#sampageswrapper').remove();
}
But I am unable to remove the div please guide me.

You are selecting sampageswrapper based on ID, but you should test on the class.
jQuery('#container2').find('.sampageswrapper').remove();
jQuery('#container2 .sampageswrapper').remove(); // works too

Seem like you have duplicated id, since id must be unique you can use class instead for your dynamically added elements, then you can do:
if ($("#container2 .sampageswrapper").length > 0) {
jQuery('#container2').find('.sampageswrapper').remove();
}

You try to remove an object with id sampageswrapper, but in the html that is the class names. Use .sampageswrapper instead in your remove statement!

Add a breakpoint:
if ($("#sampageswrapper").length > 0) {
debugger;
jQuery('#container2').find('#sampageswrapper').remove();
}
Open console and refresh page, once it stops on the breakpoint, in console run this:
jQuery('#container2')
Make sure it returns the object you expect. Then run this in console:
jQuery('#container2').find('#sampageswrapper')
Here you'll see it returns nothing. This is because the '#sampageswrapper' selector is wrong and should be a class selector instead:
jQuery('#container2').find('.sampageswrapper')
You should be going through this process whenever you have a problem with code that involves jquery selectors, so that you can focus in on the specific selector that is causing the problem.

if ($(".sampageswrapper").length > 0) {
jQuery('#container2').find('.sampageswrapper').remove();
}
use class selector instead of id selector

Hide/Show multiple times on a page

First of all, I know that this question has been answered on this site numerous times and that is the main problem here. I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. There must be plenty of ways to do this, but what I have right now is closest to what I want.
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something.
http://jsfiddle.net/PVLMX/
Html:
<div id="wrap">
<p>This text is visible, but there is more.<br/><br/>See more >>
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below
will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I need to be able to call the function for each new "Read More" on the page. At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page.

In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on.
Working jsfiddle: http://jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed:
every id="example.. to id="example2... in the second div.
load the script in "No wrap - in head" mode (jsfiddle left option)

In your fiddle you need to select the no wrap in <head> option. Your code works fine.
http://jsfiddle.net/uND9H/
Aslo you can't have duplicate id's

if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. Here is an example , Check it out
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated

Actually you can do it with jquery and much easier than you think
Jquery as follows:
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class.
you can make it look a little nicer with slideToggle()
Here is a fiddle: http://jsfiddle.net/up36g/

show element not working

Hi I have a problem with my function, when I call it to show my hidden div it does not work. It does not show the hidden div. I followed previous examples from what have been posted in stackoverflow but still my code does not work.
This is my html file
<div id="playTheGame" class="css/outer" style="display:none;" >
<div class="css/inner">
<h1>Choose!</h1>
<section id="hand">
<img src="images/rock.png">
<img src="images/paper.png">
<img src="images/scissors.png">
</section>
</div>
</div>
My Function
<script>
function logSuccess(){
document.getElementById("playTheGame").style.visibility="visible";
}
</script>
The Button I used for the function
<input type="button" onclick="logSuccess()" value="Show">

Change your code to this
document.getElementById("playTheGame").style.display = "block";
Since you hid it using the display property, show it using the display property.

There are two options for this:
One using JavaScript:
object.style.display="block"; // where object will be the playThemGame id element..
And the other one using jQuery; JavaScript library.
$("#playTheGame").show();
The option two won't work, because you will have to write the event function too, So just use the first one as:
document.getElementById("playTheGame").style.display="block";
Edit:
Since you are using
document.getElementById("playTheGame").style.display="block";
To disply the result, then you must use this to remove the display!
document.getElementById("playTheGame").style.display = "none"; to hide it back!
The basic idea is that, this will just shift the object-->style-->display's value to none Its not going to add any more attribute. Its just going to shift current attribute's value.

Using jQuery 'this' with a selector of multiple elements

Sorry jQuery noob question here, I am attempting to make all of the div elements with the class .thumbnail clickable with a callback function. But, once one of the div(s) of that class is clicked I need the specific ID of that given div so I can do further manipulation to that specific one. I am confused if I would use 'this' to reference that specific div once it is clicked or if I am looking at this the wrong way.
Im sure this is a very simple question for you jQuery gurus to answer, its been a long day and my brain is completely zombified.
Example Sudo Code:
<script>
$(document).ready(function() {
$(".thumbnail").click(function() {
//need to get id of thumbnail that was clicked, this is where I am confused
var thumbnail_id = $(this).attr('id')
alert(thumbnail_id);
});
});
</script>
<div class=thumbnail" id="1">Tom</div>
<div class=thumbnail" id="2">Jerry</div>
<div class=thumbnail" id="3">Sue</div>
<div class=thumbnail" id="4">Mary</div>
<div class=thumbnail" id="5">Brian</div>

DOnt you think thumbnail should be written like "thumbnail" and not thumbnail"

It is unclear what your jQuery problem is. To address the question you're asking, when an object is clicked in your code, the click handler will be called and this will be set to the DOM element that was clicked on. This works if there is one object with the thumbnail class or many.
If your problem is really that your HTML is in error, then you should add the missing quote to change this:
<div class=thumbnail" ...
to this:
<div class="thumbnail" ...
FYI, a better way to do this is as follows. This fixes the quote problem and uses a data attribute rather than a numeric id value:
Working demo: http://jsfiddle.net/jfriend00/8tczB/
<script>
$(document).ready(function() {
$(".thumbnail").click(function() {
//need to get id of thumbnail that was clicked, this is where I am confused
var thumbnail_id = $(this).data('id');
alert(thumbnail_id);
});
});
</script>
<div class="thumbnail" data-id="1">Tom</div>
<div class="thumbnail" data-id="2">Jerry</div>
<div class="thumbnail" data-id="3">Sue</div>
<div class="thumbnail" data-id="4">Mary</div>
<div class="thumbnail" data-id="5">Brian</div>

How to send a form to a javascript function

I need your help to understand how I can send information from a form to a javascript function.
I've created a basic function here : http://jsfiddle.net/nZhR8/5/
The purpose of this function is to hide/display a div.
In fact, I'll have a table with a few contacts (between 0 and 20). There will be a selectlist per contact. For each contact, I'll have to display 1 special div in function of 1 own particularity. So, for contact1, I may have to display div3, and for contact2, display div1.
I'll also use the javascript function to send to the database wich div has to be displayed. It will be a kind of advancement.
If I'm doing it wrong, please tell me why.

I don't see the idea behind this but that could do the trick: http://jsfiddle.net/YCPM7/
That must be a simple draft of a much bigger project.
Also, I would suggest that you either use a common class for each DIVs
<div class="message 1">1</div>
<div class="message 2">1</div>
<div class="message 3">1</div>
...
So you can simply do:
$(".message").hide();
Enjoy.

Firstly, remove the $(...) from where you define the function showDiv, as you don't want to execute showDiv when the page has loaded.
Apart from that, your problem seems to be jsFiddle. It didn't work there, but when I copy+pasted exactly what you posted on jsFiddle into a file, fixed what I mentioned above and tried it in FF, it worked.
There are of course things you can do better about your code, but it works. Suggestions: Give all divs the same class and distinguish them by id, then hide everything with that class and show the one with the correct ID. For the onload, instead of copying the whole code just execute showDiv(1).

You need something like this jsFiddle?
<div id="1" class="1">1</div>
<div id="2" class="2">2</div>
<div id="3" class="3">3</div>
<div id="4" class="4">4</div>
<div id="5" class="5">5</div>
$('div').hide();
$('#StateSelection').change(function() {
var $this = $(this);
$('div').filter('.'+$this.val()).show();
});