We Keep Coding

jQuery isn't recognizing a button

I'm trying to create a click event to a button but it ain't working.
This is what I've got so far:
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="#background">
<div id="#showMoreComments">
<button id="#btn_showComments">Show more comments!</button>
</div>
</div>
I know it's kind of a silly question. But what am I doing wrong?

First remove the "#" from the id declaration in button tag i.e have this:
<button id="btn_showComments">Show more comments!</button>
Second, move the script below the html.

Remove the # from the button id. The # tells JQuery to select an element with the following id.
Like this:
<div id="#background">
<div id="#showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>

<button id="#btn_showComments">Show more comments!</button>
should be -
<button id="btn_showComments">Show more comments!</button>
then your code will work just fine. :)
Kindly don't use # in HTML tags for IDs. # is attached to get an element using its ID.

Try this code, actually you have added # in your html code for ids. Please remove it.
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="background">
<div id="showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>

Remove the # from the element in the html.
<div id="background">
<div id="showMoreComments">

Jquery get closest a href attribute

I have the below markup and I am trying to get the href but always getting undefined. Any help is appreciated.
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
$container = $('.wrapper');
$container.on('click', '.bottomP', function (event) {
console.log($(this).closest('a').attr('href'));
});

Assuming that you fix the class/ID issue noted in the comments by Mohammad you could use:
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>

Aside from what Mohammad mentioned about needing to use .wrapper instead of #wrapper. I recommend using .find() instead of .closest(). .closest() does not work in IE, but that might not be an issue for you. you can also do something like this:
$("div.wrapper").on('click', '.bottomP', function () {
console.log($("div.wrapper a:first").attr('href'));
});
This will grab the first <a> tag inside the wrapper div.

JavaScript Remove Tag Not Working in Mozilla

I want to remove the tag <div id='parent'> if no data is stored in the <span id="test">
It works perfectly in Chrome, but Firefox can not.
Is there a solution to fix this code?
If you must use jQuery, I am also ready.
My Code:
<h1>Result:</h1>
<div id='parent'>
<b>Age:</b> <span id='test'></span>
</div>
<script>
if ( document.getElementById('test').innerHTML == '' ){
document.getElementById('parent').remove();
}
</script>
Sample Chrome: http://i.stack.imgur.com/lDesY.png
Sample Mozilla: http://i.stack.imgur.com/R2SS1.png

If you are ready to use jQuery then you can do this
if($("#test").html()==""){
$("#parent").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Result:</h1>
<div id='parent'>
<b>Age:</b> <span id='test'></span>
</div>

replace this (see this example and this reference)
document.getElementById('parent').remove();
by
currentNode = document.getElementById('parent').remove();
currentNode.parentNode().removeChild( currentNode );

Empty the entire neighbor div section

I have two div sections parent and I want to empty its neighbor when I click on the button keywordsubmit in either divs.parent. But the following code isn't working:
$('.parent').each(function() {
$(.keywordsubmit).click(function(e){
$(this).parent().siblings('#phpcom').empty();
});
});
HTML code:
<div>
<div class="parent">
<select>
<option>AAA</option>
</select>
<inputtype="text">
<button type="submit" class="keywordsubmit">Submit</button>
<div class="area"></div>
</div>
<div class="parent">
<select>
<option>AAA</option>
</select>
<inputtype="text">
<button type="submit" class="keywordsubmit">Submit</button>
<div class="area"></div>
</div>
<div id="phpcom">.............</div>
</div>
I have also tried closest(),next(), but it seems something is missing.
Any help would be appreciated.

$('.keywordsubmit').click(function(){
$('#phpcom').empty();
});

Try this
JSFIDDLE
$('.keywordsubmit').click(function(){
greatParent = $(this).parents('.parent').parent();
$("#phpcom",greatParent).empty();
});

Just do this:
$('.keywordsubmit').click(function(){
$(this).closest('.parent').next().empty();
});

Try the following code , It may help you
$('.parent').each(function() {
$(.keywordsubmit).click(function(e){
$('.parent').hide();
$(this).parent().show();
});
});

Use this JSFIDDLE
$('.keywordsubmit').click(function(){
$('.parent').hide();
$(this).parent().show();
});

Select div children

I want to select the child of a div using jquery. I try with children() but didn't work
<div class="main" id="this_456" onclick="change(456)">
<div id="title">some text</div>
<div id="body">some text as well</div>
</div>
javascript
function change(id)
{
$('#this_'+id).children("#body").fadeOut();
}

Your code works if you specify 456 as the argument rather than this_456 (see: http://jsfiddle.net/aLxTz/).
However, since <div id="body"/> is identified by ID (#body) it's redundant to look for it inside and other element - it should be unique document-wide. Use the class="" attribute if you expect to have several instances of a body <div/>, e.g. <div class="body">...</div>.
Furthermore, note that the onclick handler has the this variable set to the context element. Since this is the element in question itself, you could write
<div class="main" id="this_456"> ... </div>
$(".main").click(function() {
$(this).chlidren(".body").fadeOut();
});

<div class="main" id="this_456" onclick="change(this)">
<div id="title">some text</div>
<div id="body">some text as well</div>
</div>
function change(elm) {
$(elm).children("#body").fadeOut();
}
FIDDLE

Try this code:
function change(id) {
$('#this_'+id+ ' > div').find("#body").fadeOut();
}