We Keep Coding

How to remove a div on click and show another div

I want to show a hidden div once a user click on a text input and remove the div that was displayed, but if the user click again on the text input I don't want the div that just got deleted to show up again.
I have tried this so far:
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
.
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$(" #div2").toggle();
});
});

I think this below snippet solves your problem, please let me know if this helps you!
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$("#div1").hide();
$(" #div2").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />

I want to show a hidden div once a user click on a text input and
remove the div that was displayed
Add a focus event to the input
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
Demo
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
#div2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />

$(document).ready(function(){
$("#input").click(function(){
$("#div1").toggle();
});
});
Don't make two buttons, one for hide and other one for show.
Make one button and use toggle().
Now that's all you need ... This will definitely work.
Read this it will help you
https://www.javatpoint.com/jquery-toggle
:)

jquery - click, append, load, slideDown not displaying as expected

I'm trying to implement, what I thought would be a simple click, load, slideDown scenario. But I can't get the slideDown part to display.
I have the following two buttons:
<div>
<fieldset id="btn">
<input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db1" data-id=1" VALUE="DB1"/></br>
<input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db2" data-id="2" VALUE="DB2"/></br>
</fieldset>
</div>
I then have the following jQuery:
$(document).ready(function()
{
$('.databasebtn').on('click',function()
{
$(this).append("<div id='btnlist'></div>");
$('#btnlist').slideDown("200",function()
{
$('#btnlist').load("test78b.php");
});
})
});
The idea being that I click the button, I append the #btnlist div to the button, and fill the new div with the contents of test78b.php, which should generate a list of checkboxes.
It all works fine, except that I can't see the checkboxes. If I look at the code in the background it is all there, it just wont show up.
If I include 'test78b.php' separately it displays as expected.
Is there something I am missing?

You can not append div to a button, you can append div to a parent in this case fildset with this code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$(this).parent().append("<div id='btnlist'></div>");
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
or you can use insertBefore to append div before butoon clicked with this code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$("<div id='btnlist'></div>").insertBefore($(this))
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
or append div to the body tag with this other code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$("<div id='btnlist'></div>").appendTo('body')
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
and then, for a correct html code,you shouldn't have multiple items on the same page with the same id. The div added via script should not have id btnlist but class="btnlist"

DEMO http://jsfiddle.net/TWQbD/4/
$('.databasebtn').on('click',function() {
$(this).next('.databasetext').append("<div class='btnlist'>test78b.php</div>");
$(this).next('.databasetext').find('.btnlist').last().slideDown("1000");
});

jQuery toggle div from select option with append method issue

I have div with <\select> drop down. And from the Drop down if I select limited it opens a div with Input and it works fine.
I also added one link + Add New and clicking on the +add new creates a new div with the <\select> drop down which should work same as before but when I select limited from the new drop down it effects the previous one. How can I make it so that it only open for the div I am working and do no effect other divs no meter how many I create.
JS FIDDLE
HTML
<div class="wrapper">
<div class="row">
<select class="optionSelector">
<option>-Select-</option>
<option value="limited">Limited</option>
<option>Unlimited</option>
</select>
<div class="limited" >
<input type="number">
</div>
</div>
</div>
Jquery
$('.add').click(function() {
$(".wrapper").append('<div class="row"><select class="optionSelector"><option>-Select-</option><option value="limited">Limited</option><option>Unlimited</option></select><div class="limited" ><input type="number"></div></div>');
});
$(".wrapper").on('change', '.optionSelector', function(){
$('.limited').hide();
$('.' + $(this).val()).show();
});

you can use .siblings() to get only the dropdown next to it
demo
$(".wrapper").on('change', '.optionSelector', function () {
$(this).siblings('.limited').hide();
$(this).siblings('.' + $(this).val()).show();
});

Try:
$(".wrapper").on('change', '.optionSelector', function(){
$(this).closest('.row').find('.limited').css('display', $(this).val()=='limited'?'block':'none');
});
jsFiddle example

The $('.limited') selector gets all the elements with the class .limited.

traverse element inside the div

html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.

Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/

The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});

You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope

Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here

How to make box appear when text is entered into input?

I have this HTML code:
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box"></div>
</div>
I have added it to this JSFiddle link: http://jsfiddle.net/PDnnK/4/
As you can see there is:
INPUT FIELD
&
BOX
I want the box to appear only when text is typed in the input. How is this done?

Start the box out with display: none. Then, you can capture the keypress event for the input:
document.getElementById('myInput').onkeypress = function () {
document.getElementById('myBox').style.display = 'block';
}

Something like this with jQuery:
$("#id-of-input").change(function() { $("#id-of-box"}.css('display', 'block'); } );
or change .change to .click

Binding to "change" is usually not super-handy, since it usually doesn't fire until you tab or click away from the element.
However, polling isn't the answer either.
original answer:
http://jsfiddle.net/xNEZH/2/
super-fantastic new answer:
http://jsfiddle.net/4MhKU/1/
$('.input1').bind('mouseup keyup change cut paste', function(){
setTimeout(function(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
}, 20);
});
The setTimeout is because cut and paste events fire BEFORE the text is cut or pasted.