Input button onClick remove closest div - javascript

Erm, why this don`t work, iv used similar code like this for my site many times..butnow dont work..
HTML
<div><span>a</span><input type='hidden' /> <input type='button' onClick='Remove(event)' />
JQuery
function Remove(e){
e.preventDefault();
$(this).closest('div').remove();
}
Looks like $(this) is not my button. I tested with alert($(this).val()) and nothing heppend.

How about adding a class to the button element and bind a handler to the button
<div>
<span>a</span>
<input type='hidden' />
<input type='button' class'removeDiv' />
Code:
$(function () {
$('.removeDiv').click (function () {
$(this).parent().remove();
// As I see the input is direct child of the div
});
});
My divs are created from clientside and serverside too. Its much easy to add onclick function instead to unbind-rebind all on new item, no?
In such cases you can use delegated events. See below,
$(function () {
//Replace document with any closest container that is available on load.
$(document).on('click', '.removeDiv', function () {
$(this).parent().remove();
// As I see the input is direct child of the div
});
});

This should work!
HTML
<div><span>a</span><input type='hidden' /> <input type='button' onClick='Remove(this)' />
JQuery
function Remove(obj){
$(obj).closest('div').remove();
}

Related

jQuery toggleClass only toggles once

I have a div which i am trying to toggle its class from one to another. I am able to toggle it only once but it will not return to the original class. I looked around for possible answers and looked into the propogation function, however i am unsure this is the correct use?
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
<script>
$(startStopCount).click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
</script>
</body>
You are getting the element via $('.cInact'). However, when you toggle the class .cInact, you can no longer get that element by $('.cInact') (it doesn't have that class anymore).
You can either do a selection with $('#counter') (getting the ID instead of the class, because you aren't toggling the ID) or assign the element reference to a variable:
var myAwesomeCounter = $('.cInact');
// Then use
myAwesomeCounter.toggleClass('cDown cInact');
Well, you're selecting the class 'cInact' and then toggling it's class.
i.e- removing it.
Wen you're trying to select the element again with the same selector: classname == cInact it's no longer true for that element. so you select nothing, and nothing happens.
To fix this, try using a different selector- e.g- id, like so-
$('#counter').toggleClass('cDown cInact');
The selector $(startStopCount) is wrong. It should be $("#startStopCount")
$('#startStopCount').click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
</body>
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
Better perhaps:
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('body').click(function () {
$('#counter').removeClass('cDown');
});

How to pass <li>text without replace the text on textbox

I got school homework for today. I can pass the emoji to a textbox already but it will replace the previous emoji or text on the textbox if clicked. I want to know how to not replace the textbox text if I clicked and able to keep input emoji or text. Sorry for my bad english if you guys don't understand.
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
$("ul.emoji li").click(function () {
$("#ToSend").val($(this).text());
});
});
});
<asp:Textbox id="ToSend" runat="server" Width="300px"></asp:Textbox>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
To add to the existing value you need to append to the val() in the input instead of replacing it each time. To do this you can pass a function to the val() method which handles the appending for you, like this:
$(document).ready(function() {
$("ul").hide();
$("input.btnemoji").click(function() {
$("ul").toggle();
});
$("ul.emoji li").click(function() {
var $li = $(this);
$("#ToSend").val(function(i, v) {
return v + $li.text();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ToSend" width="300px">
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
Also note that I moved the $("ul.emoji li").click() handler outside of the one for .btnemoji as you were repeatedly adding new event handlers each time the ul was toggled.
Here is the shortest method. All you need is to use this:
$("#ToSend").val($("#ToSend").val()+$(this).text());
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
});
$("ul.emoji li").click(function () {
$("#ToSend").val($("#ToSend").val()+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ToSend"/>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
$("#ToSend").append($(this).text());
User append function without using

Inside an id div find all the checkbox and check and hide other unchecked

i am trying to learn and create a jquery which $("#answer") and find all the checkbox inside and check. As an example if checkbox inside #a1 is checked other div (a2,a3,a4) is hidden or other message come out. if i uncheck the #a1 all the div will come out again.
Please enlighten me on the code.
<div id="answer">
<div id="a1">A.<input type="checkbox" name="a1" onclick="cbox()" ></input></div>
<div id="a2">B. <input type="checkbox" name="a2"onclick="cbox()"></input></div>
<div id="a3">C. <input type="checkbox" name="a3"onclick="cbox()"></input></div>
<div id="a4">D. <input type="checkbox" name="a4"onclick="cbox()"></input></div>
</div>
function cbox() {
if (this checkbox is checked) {
target other div inside (#answer) and add .hide()
}
}
2)Is there anyway to add a trigger where i don't need to use onlick="cbox" ?
tq
It's better to use .click() instead of inline javascript onclick.
However, you should use .change() event for input elements instead of click:
$('input[type="checkbox"]').change(function() {
$(this).parent().siblings('div').toggle(!this.checked);
});
Fiddle Demo
Use .change() event instead of .click(). Try this:
$('input[type="checkbox"]').change(function() {
$(this).parent('div').siblings('div').toggle(!this.checked);
});
DEMO
Try this:
$("#answer input").change(function () {
if ($(this).is(":checked")) {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "none");
})
} else {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "block");
})
}
});
DEMO

disable javascript function

I'm have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem
Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle
I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});
I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/

Issue with $(this) in JQuery

Hey guys I have the following:
$(".views").click(function() {
$(this).(".views").show();
});
$(".closeviews").click(function () {
$(this).(".closeviews").hide();
});
This will open up a list based on which view list they want to look at, for some reason it's telling me Uncaught SyntaxError: Unexpected token (
Once I remove the (this). it goes away, so I am kinda confused as to why it is telling me that.
EDIT:
I changed to this:
$(".views").click(function() {
$(this).find(".views").show()
});
$(".closeviews").click(function () {
$(this).find(".closeviews").hide()
});
Does nothing, if I go to the view list above it opens this one and that one.
UDATE:
HTML:
The one I am trying to open with the above script -
<input type='button' value='View Your Employees' class='views' name='views' />
<input type='button' value='Close' class='closeviews' name='closeviews' />
The one I click above this one, opens the above plus this one:
Script:
$(".notempl").click(function () {
$(".notempltable").show();
});
$(".closenotempl").click(function () {
$(".notempltable").hide();
});
HTML:
<input type='button' value='View Employees' class='notempl' name='notempl' />
<input type='button' value='Close' class='closenotempl' name='closenotempl' />
UPDATE:
Hey guys thanks for all the help, got it sorted out. I actually was telling the wrong thing to show and hide. Each list is populated by a PDO statement and a table so I needed to show the table, hide the table not the button.
Thanks guys :)
It should be
$(this).hide();
$(this).show();
If you remove the $(this) then it will hide and show all the elements with that class. If you click on any of them then all of them will be hidden. I do not believe you want that.
I think you mean $(this).find(".views").show()
Demo
HTML:
<ul class='viewstable'>
<li>Sample</li>
<li>Sample 2</li>
</ul>
<input type='button' value='View Your Employees' class='views' name='views' />
<input type='button' value='Close' class='closeviews' name='closeviews' />
JS:
$(function () {
$(".views").click(function () {
$('.viewstable').show();
});
$(".closeviews").click(function () {
$('.viewstable').hide();
});
});
Why do you want to find the same class. As you can just do $(this) to access the class and its done:
$(".views").click(function() {
$(".closeviews").show(); //Show close
});
$(".closeviews").click(function () {
$(".views").hide(); // Hide view
});

Categories

Resources