We Keep Coding

How do I stop JavaScript element clearing everything on click

The first delete produced works fine when clicked on "add more" but del element produced after that deletes everything present on the page. Can someone please help me, maybe something is wrong with ele, I don't have much experience with JS
Steps to reproduce :
Click on add more and then the next add more which got created on click the previous add more.
click on the last del
It deletes everything rather than deleting that very DIV
$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

The problem was in the use of .clone()
You where cloning the latest cloned element which forced you to create an if statement to prevent creating more than one delete button. But that also did not allow you to execute what was inside the if statement after a certain number of nodes cloned.
You also could not use the btn variable outside that if statement.
The solution is to clone always the first example-2element so we can jump the use of the if statement and allow the btn variable to be used freely.
I added an extra div #wrapper to use find('div').first() so the same example-2 element can be copied every time.
Snippet
$(function() {
$(".btn-copy").on('click', function() {
var ele = $('#wrapper').find('div').first().clone(true);
ele.find('input').val('');
let btn = document.createElement("button");
btn.innerHTML = "Delete";
ele[0].appendChild(btn);
btn.onclick = (e) => { ele.remove() };
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="example-2 form-group row" style="margin-top:15px">
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button" style="margin-top:30px">Submit</button>
</div>
</div>
</div>

(keyup.enter) triggered twice | Angular

So I have an HTML with increment and decrement functionality on button/enter click. Button (click) works as expected however on (keyup.enter) increment function is triggered twice.
When I press Tab + enter on keyboard (keyup.enter) and (click) both events are triggered which is calling the function twice
<div class="container">
<div class="row">
<div class="col-sm" style="text-align:center">
<h2> Increment/Decrement Functionality</h2>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm">
Increment All <button (click)="incrementAll()" (keyup.enter)="incrementAll()"> +
</button>
Decrement All
<button (click)="decrementAll()" (keyup.enter)="decrementAll()"> - </button>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
<input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
<button (click)="decrement(i)" (keyup.enter)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
</button>
<button (click)="increment(i)"
(keyup.enter)="increment(i)"> +
</button>
</div>
</div>
Typescript:
increment(index) {
this.countNumbers[index].number += 1;
}
decrement(index) {
if (this.countNumbers[index].number > 0) {
this.countNumbers[index].number -= 1;
}
}
incrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
this.countNumbers[i].number += 1;
}
}
decrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
if (this.countNumbers[i].number > 0) {
this.countNumbers[i].number -= 1;
}
}
DEMO

By default, an HTML button can be "clicked" on with enter (e.g. for people who use the keyboard to navigate the form).
In your code, if a button is focused (if you've clicked on it before), and you press enter, these things happen:
The default "click" event is registered, so you get an increment.
your (keyup.enter)="incrementAll()" is registered, so you get a second increment.
A quick fix is to get rid of (keyup.enter)="incrementAll()":
<div class="container">
<div class="row">
<div class="col-sm" style="text-align:center">
<h2> Increment/Decrement Functionality</h2>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm">
Increment All <button (click)="incrementAll()"> +
</button>
Decrement All
<button (click)="decrementAll()"> - </button>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
<input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
<button (click)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
</button>
<button (click)="increment(i)"> +
</button>
</div>
</div>
</div>

On one button click event for three pages

I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}

You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed

If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>

Removal of added div should result in decrease of counter and next subsequent divs should be renamed as per the order

On click of add button, I can able to add 7 divs in an order. And when I try to remove a div in between, then, sebsequent divs should be renamed/updated as per the order.
My HTML
<div class="container">
<div class="row">
<div id="driver<%=i%>" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%=i%>" aria-expanded="false">
<a class="accordion-toggle driver-title<%=i%>">Driver <%=i%></a>
<div class="pull-right"><span class="glyphicon glyphicon-plus"></span></div>
</h4>
</div>
<div id="collapse<%=i%>" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname<%=i%>" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm looping this content 7 times so that I can add divs 7 times in a sequential order like 1 2 3 4 5 6 7.
My javascript code is as follows.
var valueItemCount = 2;
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
var isRemove = false;
var isAdded = false;
$('#hdItemCount').val(valueItemCount);
function addValueItem() {
//alert(isRemove);
//$('#errmessage').html("");
console.log("valueItemCount addValueItem : "+valueItemCount);
console.log("isRemove : "+isRemove);
if(valueItemCount <8) {
if (isRemove && !isAdded) ++valueItemCount;
// alert(valueItemCount);
$('#driver' + valueItemCount).show();
++valueItemCount;
$('#hdItemCount').val(valueItemCount);
isAdded = true;
} else {
//$('#errmessage').html("Maximm Limit Reached");
}
// alert(isAdded);
console.log("isAdded : "+isAdded);
}
function removeValueItem(cnt) {
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
if (isAdded && !isRemove) {--valueItemCount;}
alert(cnt);
console.log(" removeValueItem cnt : "+cnt);
console.log("valueItemCount removeValueItem : "+valueItemCount);
var count=Number(cnt)+1
//alert('count1111'+count);
$('#driver' + cnt).hide();
if (isAdded && isRemove) { --valueItemCount; }
$('#hdItemCount').val(valueItemCount);
//alert(count);
console.log("count : "+count);
var i;
for (i = count; i <8; i++) {
var j=i-1;
$('#'+i).attr('id',j);
$('#driver' + i).attr('id','driver'+j);
$('.driver-title' + i).text('Driver '+j);
}
isRemove = true;
console.log(" isRemove remove : "+isRemove);
console.log(" isAdded remove : "+isAdded);
if (valueItemCount == 2) {
isRemove = false;
isAdded = false;
}
}
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
var itemcnt = '<%=cntvalue%>';
for(var i=valueItemCount;i<=8;i++){
$('#driver'+i).hide();
}
for (var i=1;i<valueItemCount;i++){
console.log("valueItemCount : "+valueItemCount);
$('#driver'+i).show();
$('#hdItemCount').val(valueItemCount);
}
With this code, I can able to add divs upto 7 which is correct. when I try to delete one particular div in between the order, subsequent divs got renamed but later, i'm unable to add / remove further. Remove is working only once.
Can anyone help on this.

Can add up to 7 drivers in total by clicking add Icon
Removing any driver removes particular driver, thereby reordering all Ids.
Removing each driver, will give space to add another driver at last, such that their total count won't exceed 7;
function addValueItem() {
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
var templateDiv = $('.driver-template').clone(true);
templateDiv.removeClass('driver-template hidden').addClass('container driverContainer');
templateDiv.clone(true).insertAfter($('div.driverContainer:last'));
reAssignIDs();
}
}
function removeValueItem(elem) {
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length == 1) {
addValueItem();
}
$(elem).closest('div.driverContainer').remove();
reAssignIDs();
}
function reAssignIDs() {
var Index = 1;
$('div.driverContainer div.knowledge[id*=driver]').each(function() {
if (!$(this).hasClass('hidden')) {
$(this).attr('id', 'driver' + Index);
$(this).find('h4').attr('data-target', '#collapse' + Index);
$(this).find('h4 a').text('Driver ' + Index);
$(this).find('div[id*=collapse]').attr('id', 'collapse' + Index);
$(this).find('input[id*=drname]').attr('id', 'drname' + Index);
$(this).find('.remove_wrap_but a.btn-yellow').attr('id', Index);
Index++;
}
});
$(".glyphicon.glyphicon-plus").addClass('hidden');
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
$(".glyphicon.glyphicon-plus:last").removeClass('hidden');
}
}
$(".panel-title").click(function(e) {
if (!$(e.target).is('.glyphicon.glyphicon-plus'))
$(this).closest('.row').find('.panel-collapse').toggleClass('collapse');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="driver-template hidden">
<div class="row">
<div id="driver" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse" aria-expanded="false">
<a class="accordion-toggle driver-title1">Driver X</a>
<div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container driverContainer">
<div class="row">
<div id="driver1" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" aria-expanded="false">
<a class="accordion-toggle driver-title1">Driver 1</a>
<div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname1" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
*Please note that I've created a template div with class 'driver-template'. Whils clicking 'Add' option, I just inserted this template at end, and renamed all ids. You can even keep 7 drivers initially using your loop. Further working like removing and adding will work accordingly using this logic.*
If still this is not what you are required, please explain more.

javascript doesn't work in all elements of foreach MVC

i build a code for comments and replies of them.. i use a #foreachto show all elements in ViewBag which have a list of comments..
every thing works fine in post and get ..
but my problem it's when i try to make "submit"button of replies disable to prevent anyone from pressing it without typing..
so i use javascript but the code didn't work fine ..
first it work only with the last element of #foreach .. after i use the name as "class" instead of "id" it work for all elements
but the problem is .. if i typing in first reply input text for example .. the button didn't enable .. but if i typing at last reply input text .. all buttons enable ..
I want the code work for each reply .. only when some one typing in that input text ..
JavaScript
<script>
var $inputreply = $('.replies');
var $buttonreply = $('.replysubmit');
setInterval(function () {
if ($inputreply.val().length > 0) {
$buttonreply.prop('disabled', false);
}
else {
$buttonreply.prop('disabled', true);
}
}, 100);
</script>
View which have loop #foreachof comments and replies for each comment
<section class="comment-list">
#foreach (var item in ViewBag.CommentsList)
{
<article class="row">
<div class="col-md-10 col-sm-10">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left" style="direction:rtl;">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #item.CommentDateTime</time>
</header>
<div class="comment-post">
<p>#item.Comment</p>
</div>
<p class="text-right"><a class="btn btn-default btn-sm replybtn"><i class="fa fa-reply"></i> reply</a></p>
</div>
</div>
<!--ReplyBox-->
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Reply", "Home", new { #id = #item.PostID, #commentId = #item.ID }, FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="input-group" style="direction:ltr;">
<input type="text" class="replies form-control" placeholder="" name="replies" />
<span class="input-group-btn">
<button class="replysubmit btn btn-primary" type="submit">Reply</button>
</span>
</div>
}
}
else
{
<div class="form-horizontal">
<div class="alert alert-danger replybox" style="display:none;">
<span>please login to reply</span>
</div>
</div>
}
#foreach (var subitem in ViewBag.Relies)
{
if (#subitem.CommentID == #item.ID)
{
<article class="row">
<div class="col-md-9 col-sm-9">
<div class="panel panel-default arrow left">
<div class="panel-heading left">Reply</div>
<div class="panel-body">
<header class="text-left">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #subitem.ReplyDate</time>
</header>
<div class="comment-post">
<p>#subitem.CommentReply</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2 col-md-offset-1 col-sm-offset-0 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#subitem.UserName</figcaption>
</figure>
</div>
</article>
}
}
</div>
<div class="col-md-2 col-sm-2 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#item.userName</figcaption>
</figure>
</div>
</article>
<br />
}
</section>

The selector $('.replysubmit') returns all the items with that css class, hence updating the disabled property of all those elements, not just the one closest to the input element.
You should use a relative selector to get the submit button inside the form where the reply input element is.
jQuery closest() and find() methods will be handy
This should work
$(function () {
$('.replysubmit').prop('disabled', true); // Disable all buttons when page loads
// On the keyup event, disable or enable the buttons based on input
$(".replies").keyup(function() {
if ($(this).val().length > 0) {
$(this).closest("form").find(".replysubmit").prop('disabled', false);
} else {
$(this).closest("form").find(".replysubmit").prop('disabled', true);
}
});
});