Develop Reference

Remove next element using jQuery

I have the below HTML
<div name="taskNotificationsDiv">
<div class="notificationCard">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
</div>
And I have the below script which when x is clicked removes the container from the parent.
$(".taskNotificationClose").click(function (){
this.parentNode.parentNode
.removeChild(this.parentNode);
return false;
});
What I am looking for is also removing the hr which is below the div container..Can someone please have a look and let me know how it can be done.
Here's the fiddle [Fiddle][1]
I tried with the below code to find nearest hr and remove it from the parent but it's throwing an error
var $hr = $(this).next('hr');
this.parentNode.parentNode.removeChild($hr);
Thanks
[1]: https://jsfiddle.net/so3k2hpq/

You can use .next() function. A better approach to solve the problem with JQuery:
$(".taskNotificationClose").click(function (){
$(this).parent().next("hr").remove();
$(this).parent().remove();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div name="taskNotificationsDiv">
<div class="notificationCard" style="color:red;">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard" style="color:blue;">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard" style="color:green;">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
</div>

You can move 'hr' tag inside each div. It will solve your problem.

JQuery .next(element) can do this
$(".taskNotificationClose").click(function (){
$(this).parent().next("hr").remove();
$(this).parent().remove();
return false;
});
The reason for your earlier error, is that you removed the first sibling first before calling .next()

How to stay on div after toggle jquery?

$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").toggle("hover");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I have a simple button i.e. Sent. Now, What I actually want when I hover on Sent button then It show div i.e. <div class="drop"> but it hide when I move cursor from Sent button to <div class="drop">.
Now, I want stay on <div class="drop"> when hover on Sent if I remove my mouse from <div class="drop"> it will hide again. So, How can I do this? Please help me.
Thank You

you can try below code where show drop when hover on sent button. On hover of drop do nothing but hide it when you leave drop
$(document).ready(function () {
$(".req_sent").hover(function(){
$(".drop").show();
});
$(".drop").hover(function(){
//do nothing
}, function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>

Here you go
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
</div>
<script>
$(document).ready(function () {
$(".profile_btnn").hover(function(){
$(".drop").toggle("hover");
});
});
</script>

You want to keep, visible div event mouse out from Sent button. And hide when its mouse over on div
Just don't use toggle() and apply show() to get it done.
Please check below code:
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").show('slow');
});
$(".drop").hover(function () {
$(".drop").hide('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>

Unable to fire javascript event OnClick of checkbox

So I have a checkbox control that I cannot get to fire an OnClick event. I've tried a number of different ways: Binding the event onload and adding the event as a parameter in the <input type="checkbox"> tag.
Here is my most recent iteration of code. I'm trying to fire an Alert just to confirm that it changed.
<section class="border-bottom">
<div id="approx" class="content">
<h3>This is my approximate location</h3>
<div class="form-control-group">
<div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
<input type="checkbox" />
</div>
</div>
</div>
</section>
JavaScript:
$('input[type="checkbox"]').bind('click', function() {
alert("OK");
})
I also wouldn't mind being able to run it via the following input:
<input type="checkbox" onclick="runMyFunction(); return false;" />

You should use one of the following methods:
.click(function() { ... })
.change(function() { ... })
.on('click', function() { ... })
HTML:
<div section class="border-bottom">
<div id="approx" class="content">
<h3>This is my approximate location</h3>
<div class="form-control-group">
<div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
<input type="checkbox" id="checkbox" />
</div>
</div>
</div>
</section>
JavaScript:
$('#checkbox').change(function() {
alert("OK");
});

Some of the plugins require:
$("#checkbox").on('change', function() {
// content
});
or look for the manual of your plugin (sometimes you need to use: pluginName.change exchange for change)

First use your jquery function inside $(document).ready function to make sure the dom is ready like :
$(document).ready(function () {
$('input[type="checkbox"]').bind('click', function () {
alert("OK");
})
});
https://jsfiddle.net/4fmL1zfr/8/

How hide div if another div is open use javascript

i have div like this use javascript :
<script>
$(document).ready(function(){
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
$("#btnmsg-2").click(function(){
$(".msgid-2").show();
});
$("#btnmsg-3").click(function(){
$(".msgid-3").show();
});
$("#btnmsg-4").click(function(){
$(".msgid-4").show();
});
});
</script>
<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
<div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
<div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
<div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
<div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
if i click button id="btnmsg-1" then div class="msgid-1" show, and then i click button id="btnmsg-3" then div class="msgid-3" show but div class="msgid-1" not hide or close,my question how hide the div if another div is open?

Instead of using separate handlers for each, you can use the related positioning of the elements along with classes to group them to show/hide
ie, Add a class like btnmsg to all the buttons and msgedit to all the div's that have to be shown/hidden. Now register a click handler to .btnmsg elements, from your markup the .msgedit element to be shown is the next sibling of the clicked button so show that then hide all other .msgedit elements.
$(document).ready(function() {
var $edits = $('.msgedit')
$(".btnmsg").click(function() {
var $this = $(this).parent().next().show();
$edits.not($this).hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
<button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
<button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
<button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
<button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>

Please add same classes to similar elements, and then use this jQuery code instead:
$(document).ready(function(){
$(".btnmsg").click(function(){
$(".msgid").hide();
$(this).parent().next(".msgid").show();
});
});
See the complete DEMO working: https://jsfiddle.net/lmgonzalves/n5f78kqs/

jsBin demo
don't use msgid-1, msgid-2 etc... cause it defeats the purpose of classNames. Use only msg
Same goes for your buttons. Remove the buttons IDs. use Class class="btn"
Don't use inline styles. Use <style> instead or call-to an external stylesheet.
HTML
<div class="btn">
NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send">
</div>
CSS:
.msg{
display:none;
}
See how more readable is now your code?
jQuery:
var $msg = $(".msg"); // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
$msg.hide(); // Hide all
$(e.delegateTarget).next().show(); // Show next
});

You can do this by calling hide() on the elements you would like to hide.
For example, you would make the following change:
// Old
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
//New
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
$(".msgid-2").hide();
$(".msgid-3").hide();
$(".msgid-4").hide();
});
A cleaner way to do this would be to give all of your messages a "message" class, then your onClick handlers would look like this:
$("#btnmsg-1").click(function(){
$("#message").hide();
$(".msgid-1").show();
});
Hope that helps!

same function for same elements

I've got a function that, when you click in a textarea, it will slide down a button.
However, I have multiple textareas on the page with the same class and the problem is that if you click on any of the textareas, all of them will slide down the button.
How can I make it so that it only slides down on the textarea element that you click on, and not the others?
Here's a quick JSFiddle I made: http://jsfiddle.net/MgcDU/6100/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
JavaScript:
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});

Have to find the elements relative to the element that was clicked.
$(this) is the element that was clicked, and siblings() finds elements that are siblings.
http://jsfiddle.net/P9nMq/
$("textarea").click(function(){
$(this).siblings('.btn-toggle').slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(this).find('.btn-toggle').slideUp();
}
});

How about instead of relying on a class lookup, use the event target:
$("textarea").click(function(evtTarget){
$(evtTarget.target).parent().find($(".btn-toggle")).slideDown();
});
http://jsfiddle.net/paulprogrammer/MgcDU/6103/

The following snippet selects all the buttons:
$(".btn-toggle").slideUp();
You should replace it with this:
$(this).siblings(".btn-toggle").slideUp();
Update
I would rewrite your script with these lines :
$(".well").('focus blur', "textarea", function(e){
$(this)
.siblings(".btn-toggle")
.stop(true, true)
.slideToggle();
});
The advantage is that you delegate the events on the same parent of the two targeted elements and that you do not rely on any click event handlers.