when i click on add it show the text field with value. And when i click on remove its hide. But i want to remove text field value also when i click on remove.
Css
#second {
display: none;
}
#third {
display: none;
}
#forth {
display: none;
}
#fifth {
display: none;
}
html
<div id="header">
add - remove
<div id="first" class="toggle"><input type="text" value="1" name="sid[]">first</div>
<div id="second" class="toggle"><input type="text" value="2" name="sid[]">second</div>
<div id="third" class="toggle"><input type="text" value="3" name="sid[]">third</div>
<div id="forth" class="toggle"><input type="text" value="4" name="sid[]">forth</div>
<div id="fifth" class="toggle"><input type="text" value="5" name="sid[]">fifth</div>
</div>
Jquery
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
$('.toggle:visible').last().hide();
});
});
Here is my code : Jsfiddle
just add .find('input').val(''); after .hide(); to be
$('.toggle:visible').last().hide().find('input').val('');
DEMO
try this code:-
<script>
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
$('.toggle:visible').last().find(':input').val('');
$('.toggle:visible').last().hide();
});
});
</script>
use this
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
$('.toggle:visible').last().hide().find('input').val('');
});
});
Jsfiddel
hi now used to .find() and .val() as like this
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
var valNon = $('.toggle:visible').last().hide();
valNon.find('input').val(''); // add this line
});
});
Related
$(()=>{
$("#c").click(function loop(event){
$("#a").show(1000).submit(function(event){
if ($("#b").val() === "hello"){
$("#a").hide(1000);
}
else{
alert($("#b").val() + " was typed!");
}
});
});
});
#a{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a"> name : <input type="name" id="b" value="type 'hello' to hide!"></form>
<button id="c">do it!</button>
In the above snippet I don't want the input box to disappear from screen when anything other than hello is typed! It should display the message $("#b").val() + " was typed!" but shouldn't hide.
Hope this helps.
It was not actually hidden, rather the DOM itself was removed.
$(()=>{
$("#c").click(function loop(event){
$("#a").show(1000).submit(function(event){
event.preventDefault();
if ($("#b").val() === "hello"){
$("#a").hide(1000);
}
else{
alert($("#b").val() + " was typed!");
}
});
});
});
#a{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a"> name : <input type="name" id="b" value="type 'hello' to hide!"></form>
<button id="c">do it!</button>
I use clone() and remove() with div elements. witch make div element clone .
In this div element i have filed
$('.wrapper').on('click', '.remove', function() {
$(this).closest('.wrapper').find('.element:not(:first):last').remove();
setCloneButtonVisibility();
});
var cloneLimit = 12;
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
$(this).closest('.wrapper').find('.element:first').clone().appendTo('.results');
}
setCloneButtonVisibility();
});
function setCloneButtonVisibility() {
$('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
$('.2').val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text" type="text" />
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
when i click clone it clones text filed.
But if i have typed text in filed and then i make clone in clone filed is same text witch i have in first filed. how make that every new clone field was cleard
Find input elements and set their value to empty.
$('.wrapper').on('click', '.remove', function() {
$(this).closest('.wrapper').find('.element:not(:first):last').remove();
setCloneButtonVisibility();
});
var cloneLimit = 12;
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
$(this).closest('.wrapper').find('.element:first').clone()
// end() reverts last filtering operation
.find(':input').val('').end().appendTo('.results');
}
setCloneButtonVisibility();
});
function setCloneButtonVisibility() {
$('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text[]" type="text" />
<!-- For demonstration of the :input pseudoselector -->
<select name="sel[]">
<option value="" />
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
References:
.end()
:input
how about set the value to null?
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
var input = $(this).closest('.wrapper').find('.element:first').clone().find("input").val("");
input.appendTo('.results');
}
setCloneButtonVisibility();
});
var cloneLimit = 10;
var inputName = function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
// handle click and add class
$('.remove').on("click", function(){
$(this).parents('.wrapper').find('.results .element:eq(-1)').remove();
});
$('.clone').on("click", function(){
var $clone = $(this).parents('.wrapper').find('.element:first').clone();
$clone.find('input').attr('name',inputName());
$clone.appendTo('.results');
});
$('.wrapper button').on('click', function(){
if( $('.results .element').length < cloneLimit) {
$('.clone').show();
}
else {
$('.clone').hide();
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
input {
margin-bottom: 20px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text" type="text" />
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
i have made clone and remove button may be this is what you need..
I want to append div on click add more and remove that div according to my code
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
});
});
this is my code it works perfect but i want to not delete first div and remove delete button my html code is
<div id="appendbox">
<div class="add-skils-form">
<div class="skill-a">
<input type="text" class="inputtextbox" value="" name="" placeholder="Enter Your Key Skills" />
</div>
<div class="skill-b">
<select id="key-skills-select" class="defualt-select default-size">
<option value="3">Advanced</option>
<option value="2">Intermediate</option>
<option value="1" selected>Beginner</option>
</select>
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
how could i do please suggest me
Try with this.
$(document).ready(function() {
deleteRow();
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
$('.delete-row').show();
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
deleteRow();
});
function deleteRow(){
if($('.add-skils-form').length == 1){
$('.delete-row').first().hide();
}
}
});
Another Solution
Check here https://fiddle.jshell.net/o2f0kskf/1/
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().find("input[type='text']").val("").end().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest(".add-skils-form").not(":first-child").remove();
});
});
I'm trying to make a remove button that removes all that is between the li tag whose the button is inside.
$(document).ready(function() {
$('#Adicionar1').click(function() {
$('#list1').append("<li>"+ $("#Texto1").val() +"<button>remover</button>" +"</li>");
$("#Texto1").val("");
});
$('button').click(function() {
});
});
code:
http://jsfiddle.net/bdMAF/917/
Well you can not add an event to an element that does not exist. You need to either attach the event when the button is added or use event delegation.
$('#list1').on("click", "li button", function() { //listen for click on button
$(this) //the button that was clicked
.closest("li") //find the li element
.remove(); //remove the li
});
I would use jQuery's .parent() function, and make use of data attributes:
$(document).ready(function() {
$('.Adicionar').click(function() {
console.log($(this).data("listid"));
console.log($(this).data("textid"));
$("#"+$(this).data("listid")).append("<li>"+ $("#"+$(this).data("textid")).val() +'<button class="remove">remover</button>' +"</li>");
$("#"+$(this).data("textid")).val("");
$('.remove').on("click",function() {
$(this).parent().remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h3>TEMAS A APRENDER</h3>
<input id= "Texto1" type="text" name="" value="">
<button class="Adicionar" data-listid="list1" data-textid="Texto1">Adicionar</button>
<ul id="list1"></ul>
<h3>TEMAS APRENDIDOS</h3>
<input id= "Texto2" type="text" name="" value="">
<button class="Adicionar" data-listid="list2" data-textid="Texto2">Adicionar</button>
<ul id="list2"></ul>
Similar answer to one above: http://jsfiddle.net/bdMAF/920/
HTML
<span class="delegateAnchor">
<h3>TEMAS A APRENDER</h3>
<input id="Texto1" type="text" name="" value="">
<button id="Adicionar1">Adicionar</button>
<ul id="list1"></ul>
<h3>TEMAS APRENDIDOS</h3>
<input id="Texto2" type="text" name="" value="">
<button id="Adicionar2">Adicionar</button>
<ul id="list2"></ul>
</span>
Javascript
$(document).ready(function () {
var $list1 = $('#list1');
var $text1 = $("#Texto1");
$('#Adicionar1').click(function () {
var $li = $('<li>');
$li.append($text1.val()).append("<button>remover</button>");
$list1.append($li);
$text1.val('');
});
$('.delegateAnchor > ul').on('click', 'button', function() {
$(this).parent().remove();
});
});
Hi I am trying to hide some input fields when a checkbox is clicked.
Currently the checkbox will change color when clicked so that i know which one is active. It is not hiding the field when clicked tho.
I've tried a few methods but none seem to work so any help would be great.
My JQuery code:
$(function () {
$("#approvedToggle").buttonset(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
});
My asp.net markup
<div class="price-slider">
<h4 class="great">Do you pay an annual renewal fee?</h4>
<div class="col-sm-12">
<div>
<fieldset id="approvedToggle" class="text-center">
<input type="radio" id="ApproveButton" checked="checked" name="radio" />
<label id="ApproveButtonLabel" for="ApproveButton">Yes</label>
<input type="radio" id="RejectButton" name="radio" />
<label id="RejectButtonLabel" for="RejectButton">No</label>
</fieldset>
</div>
<p class="text-center">Percentage amount</p>
<div id="slider2"></div>
<h2 class="text-center" style="color: red"><b>OR</b></h2>
<p class="text-center">Fixed Amount</p>
<input type="text" id="fixedAnnualy" placeholder="0" class="form-control" />
<br />
</div>
</div>
My CSS
#ApproveButtonLabel.ui-state-active {
background: blue;
}
#ApproveButtonLabel.ui-state-active span.ui-button-text {
color: White;
font: bold
}
#RejectButtonLabel.ui-state-active {
background: blue;
}
#RejectButtonLabel.ui-state-active span.ui-button-text {
color: White;
font: bold
}
try like this:
you need to change event action and need to change html:
<div id="slider2"></div>
your $("#slider2") is empty.
$(function () {
$("#approvedToggle input[type='radio']").click(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
});
demo
Try something like below and take a look at Fiddle
$("#approvedToggle").click(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
Your slider2 was empty so added a simple data .
Check if this is what you want
This worked for me. Bind the event separately from invoking the buttonset
$("#approvedToggle").buttonset();
$("#approvedToggle").change(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});