how remove the text box one bye one in button click

how remove the text box one bye one in button click - javascript

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<div id="plusicondivbox"class="insidediv " style="margin-top:-53px;" >
<img class="mynasicondiv" src="vectorimages/mynas.svg" />
JS
$(function () {
$('.plusicon').on('click', function () {
var textBox = '<input type="text" class="textbox"/>';
var a = $(this).attr("id")
$('#'+a+"box").append(textBox);
var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>';
$('#' + a + "box").append(img);
$(function () {
$(document).on("click", ".mynasicondiv", function () {
$(this).parent('#' + a + "box").empty();
return
})
});
});
I have two buttons, plusicon button and mynesicon button. I want click the plusicon button add the textbox and image,also clicking the mynessicon button should remove the textboxs and images. My problem is that clicking the mynesicon corresponding textbox is only removing.

Use .each to remove all the elements and in order to remove use the .remove function on the targeted element.
$(function () {
var a;
$('.plusicon').on('click', function () {
var textBox = '<input type="text" class="textbox"/>';
a = $(this).attr("id")
console.log(a);
$('#'+a+"box").append(textBox);
var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>';
$('#' + a + "box").append(img);
});
$('.mynasicondiv').on("click", function () {
$('#' + a + "box").each(function(index, v){
$(v).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div><img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" /></div>
<div><img class="mynasicondiv" src="vectorimages/mynas.svg" /> </div>
<div id="plusicondivbox"class="insidediv " ></div>
</div>

Related

Elements not appearing after emptying div and appending

I have a jquery function that on a click event empties a div, gets some json, and then appends to that cleared div. However, the check boxes I am trying to append to said div are not appearing. Here is my code:
$(function() {
$("#nwCol").click(function() {
$('#adDiv').empty();
$.getJSON('/_adv_detect_su', function(data) {
$(data.advanced).each(function(index, value) {
if (value.present === 'yes') {
$('#adDiv').append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
} else {
$('#adDiv').append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="adDiv"></div>
<div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
</form>
</div>
I have this working when not clearing the div, and using the .after function. However, this is not ideal.

If you are using any AD BLOCK Your div ID, starting with 'ad' will get #header_ads style from user agent browser, that set "display: none", so it appears to not work, even if it is working. As you can see here on this print screen http://storage1.static.itmages.com/i/17/0616/h_1497628218_1896684_0db84ac526.png
So I changed your div id to anotherID now it's working
Run the snippet below.
$(function() {
$("#nwCol").click(function() {
var anotherDiv = $('#anotherID');
anotherDiv.empty();
var data = {
advanced: [{present: 'yes', name: 'test1'}, {present: 'no', name: 'test2'}]
};
$(data.advanced).each(function(index, value) {
console.log(value);
if (value.present === 'yes') {
anotherDiv.append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
} else {
anotherDiv.append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="anotherID"></div>
<div id="saveao">
<button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button>
</div>
</form>
Test Click
</div>

Please see the snippet (looks like your button id selector was incorrect):
$(function() {
$("#svAoBtn").click(function() {
$('#adDiv').empty();
$.getJSON('https://api.myjson.com/bins/16qosb', function(data) {
$(data.advanced).each(function(index, value) {
var checkedInput = "";
if (value.present === 'yes') {
checkedInput = "checked='checked'";
}
$('#adDiv').append("<input name='aoCB' type='checkbox'" + checkedInput + ">" + value.name + "</input>");
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="adDiv"></div>
<div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
</form>
</div>

jquery clone copying form elements twice on button click

I am using jquery clone.
When i click on add button a single clone is created with above fields...upto this clone works fine
But when i click Add button twice it create three copy of clone...it create three copies and like that..
i want when i create add button it just create only one clone every time and when i click remove it remove last clone...
below is my code..
<fieldset id="exercises">
<div class="exercise">
</div>
</fieldset>
<script>
$('#add_exercise').on('click', function() {
$("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
$("#toaddress").clone().val("").appendTo(".box");
$("#sender_name").clone().val("").appendTo(".box");
$("#OrderMobileCountryCode").clone().val("").appendTo(".box");
$("#sender_no").clone().val("").appendTo(".box");
$("#presentation").clone().val("").appendTo(".box");
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo('.box');
$("<br>").appendTo('.box');
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '.orange_btn', function() {
$(this).closest(".exercise").remove();
});
</script>

Change id of dynamically added button from add_exercise to remove_exercise
$("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');
And change the remove button event as ,
$('#exercises').on('click', '#remove_exercise', function() {
$(this).closest(".exercise").remove();
});
Because your code producing element with same id which in turn triggering events more than once.
Try this modified code,
<script>
$('#add_exercise').on('click', function() {
$("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
$("#toaddress").clone().val("").appendTo(".box");
$("#sender_name").clone().val("").appendTo(".box");
$("#OrderMobileCountryCode").clone().val("").appendTo(".box");
$("#sender_no").clone().val("").appendTo(".box");
$("#presentation").clone().val("").appendTo(".box");
$("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');
$("<br>").appendTo('.box');
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '#remove_exercise', function() {
$(this).closest(".exercise").remove();
});
</script>

You are using box class to append cloned item to your div. First time its work fine because there is only one div with box class, But in next click there are two div and so on.
Change your add button click listener like this
$('#add_exercise').on('click', function() {
var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
var boxDiv = newDiv.find(".box");
$("#toaddress").clone().val("").appendTo(boxDiv);
$("#sender_name").clone().val("").appendTo(boxDiv);
$("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv);
$("#sender_no").clone().val("").appendTo(boxDiv);
$("#presentation").clone().val("").appendTo(boxDiv);
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
$("<br>").appendTo(boxDiv);
$("<br>").appendTo('#exercises');
});
EDIT
I added a code snippet here it work fine. I use red boder for box class and black border for addres_box class.
$('#add_exercise').on('click', function() {
var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
var boxDiv = newDiv.find(".box");
$("#toaddress").clone().val("").appendTo(boxDiv);
$("#sender_name").clone().val("").appendTo(boxDiv);
$("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv);
$("#sender_no").clone().val("").appendTo(boxDiv);
$("#presentation").clone().val("").appendTo(boxDiv);
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
$("<br>").appendTo(boxDiv);
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '.orange_btn', function() {
$(this).closest(".exercise").remove();
});
.address_box{
padding:10px;
border:1px solid #000;
}
.box{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemsto-clone">
<input id="toaddress" value="" name="sender_name">
<input id="sender_name" value="" name="sender_name">
<input id="OrderMobileCountryCode" value="" name="sender_name">
<input id="sender_no" value="" name="sender_name">
<input id="presentation" value="" name="presentation">
<div>
<fieldset id="exercises">
<div class="exercise">
</div>
</fieldset>
<button id="add_exercise">Add Exercise</button>

You create duplicate class name 'box' and you keep appendTo('.box')
So they just append it to all '.box' class
change your script to this
$('#add_exercise').on('click', function() {
$("<div class='exercise address_box'><div class='box'></div></div>").appendTo('.test');
var lastbox = $(".box").last();
$("#toaddress").clone().val("").appendTo(lastbox);
$("#sender_name").clone().val("").appendTo(lastbox);
$("#OrderMobileCountryCode").clone().val("").appendTo(lastbox);
$("#sender_no").clone().val("").appendTo(lastbox);
$("#presentation").clone().val("").appendTo(lastbox);
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(lastbox);
$("<br>").appendTo(lastbox);
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '.orange_btn', function() {
$(this).closest(".exercise").remove();
});

Since question is not very clear, here is the way to implement your requirement of cloning elements.
var counter = (function(){
var counter = 1;
return function(){
return counter++;
}
})();
$('#add_exercise').on('click', function() {
var clone = $('#exercises div.exercise:eq(0)').clone();
clone.find('[id]').each(function(i,c){
$(c).attr('id', $(c).attr('id') + counter());
$(c).attr('placeholder', $(c).attr('id'));
});
$('#exercises').append(clone)
});
$('#remove_exercise').on('click', function() {
if($('#exercises div.exercise').length !=1)
$('#exercises div.exercise:last').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="add_exercise">Add</button>
<button id="remove_exercise">Remove</button>
</div>
<div id="exercises">
<div class="exercise">
<input id="myId" placeholder="my id" />
<input placeholder="input with no id" />
</div>
</div>

Can i add class to a different element of hover with jquery/js

i have mutable elements with different id and want to match the id name with the class on the A tag then toggle a class to the a tag`
<a id="AB" href="" class="divone marker"><span>This is ab</span></a>
<a id="ABA" href="" class="divtwo marker"><span>This is aba</span></a>
<a id="ABAB" href="" class="divthree marker"><span>This is abab</span></a>
<div id="divone"></div>
<div id="divtwo"></div>
<div id="divthree"></div>
when i hover over the div it gets the ID then matches it to the class on the a tag and adds class active and when i remover the hover it removes the class
I hope this makes sense and any help would be much appreciated
Thanks in advance
Dan

You can use jQuery.hover()
http://jsfiddle.net/4snhdpx1/6/
$('div').hover(function(event) {
if (event.type == 'mouseenter') {
$('.' + this.id).addClass('active');
} else {
$('.' + this.id).removeClass('active');
}
});
And just for fun you can use shorter code :)
http://jsfiddle.net/4snhdpx1/8/
$('div').hover(function(e) {
$('.' + this.id)[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('active');
})

I wrapped the divs in another container to have an easier access.
$('#container > div').on('mouseenter', function(){
var $el = $('.' + $(this).attr('id'));
$el.addClass('active');
});
$('#container > div').on('mouseleave ', function(){
var $el = $('.' + $(this).attr('id'));
$el.removeClass('active');
});
https://jsfiddle.net/s9628o2y/

You can do it like this with jQuery.
$('a').on('mouseenter', function() {
var classList = $(this).attr('class').split(/\s+/);
$.each(classList, function(index, classname) {
$('#' + classname).addClass('active');
});
});
$('a').on('mouseleave', function() {
var classList = $(this).attr('class').split(/\s+/);
$.each(classList, function(index, classname) {
$('#' + classname).removeClass('active');
});
});
.active {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="AB" href="" class="divone marker"><span>This is ab</span></a>
<a id="ABA" href="" class="divtwo marker"><span>This is aba</span></a>
<a id="ABAB" href="" class="divthree marker"><span>This is abab</span></a>
<br />
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>

Why jquery click event not firing?

default.aspx
click on the + symbol to increase the quantity. and - symbol for decrease the quantity.
<div class="sp-quantity">
<div class="sp-minus fff">
<a class="ddd" href="#">-</a>
</div>
<div class="sp-input">
<asp:TextBox ID="txtQuantity" runat="server" CssClass="popuptextbox quntity-input"
Width="30px" Text='<%#Eval("Quantity")%> '></asp:TextBox>
</div>
<div class="sp-plus fff">
<a class="ddd" href="#">+</a>
</div>
<%--<asp:LinkButton ID="lbtnUpdateQuantity" runat="server" CommandName="Update"><i class="fa fa-check-circle" style="color:#00374A"></i></asp:LinkButton>--%>
</div>
jquery:
<script type="text/javascript">
$(".ddd").on("click", function () {
var $button = $(this);
var oldValue = $button.closest('.sp-quantity').find("#ContentPlaceHolder1_gvItems_txtQuantity").val();
//var oldValue = $("#ContentPlaceHolder1_gvItems_txtQuantity").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.closest("#ContentPlaceHolder1_gvItems_txtQuantity").val(newVal);
});
</script>
In this when I click on the + symbol no event firing.How do i do with that jquery?

You need to wrap your code inside $(document).ready() :
$(document).ready(function(){
$(".ddd").on("click", function () {
...
})
});

Add your jQuery stuff, inside this function
$(function() {
//jQuery stuff
})

keep your jquery code inside head section its just counts in best practices and one thing more add this code in
$(document).ready(function(){
});
this will attach the events to the elements of given class when you document is ready and fully loaded/Dom is ready.

Replace div after form submit Jquery

I've created a form that when a user submits, the form the #search div is replaced by the #loading div that shows a loading image. So far it works fine.
The problem I have now is that I want the #loading div to be replaced by the #results 10 seconds after the #loading div is shown.
Can someone please help with the last few lines of code?
Here it is so far:
<div id="search">
<div id="search-area">
<h1>Heading Here</h1>
<form id="target" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="text" value="http://"/>
<input type="submit" value="Analyze"/>
<div class="clearfix"></div>
</form>
</div>
<div class="clearfix"></div>
</div>
<script>
$( "#target" ).submit(function( event ) {
$("#search").slideUp("slow", function() {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
});
$("#loading").delay(10000).slideUp("slow", function(){
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
event.preventDefault();
});
</script>

$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'><img src='/images/loading.gif'/></div>");
});
setTimeout(function () {
$("#loading").slideUp("slow", function () {
$(this).replaceWith("<div id='done'>Done!</div>");
});
}, 10000);
event.preventDefault();
});

The loading div is not available until after the first animation finishes, the second animation needs to be inside the callback:
$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
$("#loading").delay(10000).slideUp("slow", function () {
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
})
event.preventDefault();
});
DEMO

Develop Reference

JavaScript is the programming language of the Web.

how remove the text box one bye one in button click - javascript

Related

Elements not appearing after emptying div and appending

jquery clone copying form elements twice on button click

Can i add class to a different element of hover with jquery/js

Why jquery click event not firing?

Replace div after form submit Jquery

Categories

Resources