How to append and remove different appended div´s using jquery/javascript? - javascript

I have built a form where you can add a person by clicking a button. Now, I want to add a new button to delete the latest added person. My current code only deletes one person, and after that, I can't add another person again. Do someone know what's wrong?
$(document).ready(function(){
$("#button1").click(function(){
$(".flex-container-name-adult").append($(".test1").html());
});
});
$(document).ready(function(){
$("#button3").click(function(){
$(".test1").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container-name-adult">
<button id="button1">Add person</button>
<button id="button3">Delete person</button>
<div class="test1">
<div class="flex-wrapper-name-adult">
<span class="adult">Person</span><br>
<input type="text" class="input" placeholder="Name" name="name" required>
<input type="text" class="input" placeholder="Nachname" name="nachname" required>
<input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
</div>
</div>
</div>

When you click the add person button you are appending the html of test1 to the element with class flex-container-name-adult. That html don't include the div with test1 class itself. Now, when you click the delete person button you are deleting all the elements with the class test1. So, after that action, there will be no more elements with class test1 on the document that you can later use on the add person button.
I suggest to use .clone() for what you want to do, and to always delete the last added person. Something like this:
$(document).ready(function()
{
$("#button1").click(function()
{
// Clone the first ".test1" element and append it to the wrapper.
$(".flex-container-name-adult").append($(".test1").first().clone());
});
$("#button3").click(function()
{
// Delete last ".test1" element, if exists more than one.
let tests = $(".test1");
if (tests.length > 1)
tests.last().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container-name-adult">
<button id="button1">Add person</button>
<button id="button3">Delete person</button>
<div class="test1">
<div class="flex-wrapper-name-adult">
<span class="adult">Person</span><br>
<input type="text" class="input" placeholder="Name" name="name" required>
<input type="text" class="input" placeholder="Nachname" name="nachname" required>
<input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
</div>
</div>
</div>

Related

.show() doesn't work immediately - jQuery

I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>
This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>

Choose between ids that only meet some conditions

I'm facing a problem with my project. My user can create a new div by clicking a button, but he can remove whatever div he wants, expect the first one. So if he create 2 new divs here is what the code will look like:
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container2">
<input type="text" id="title2"><br />
<input type="text" id="description2">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
If the user remove the second div my code will look like this.
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
Pretty simple. Now I want to use the information entered by the user in the text inputs, but I don't know how to select the active divs. Is there a way to select the container1 and container3 in the example above?
Keep in mind that the user can use up to 99 new div.
Your help is appreciated. Thank you,
Just apply a CSS selector:
<div id="parent">
<div id="container1">
<input type="text" id="title"><br />
<input type="text" id="description">
</div>
<div id="container3">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
</div>
$('#parent > div')
See here for more information: https://api.jquery.com/category/selectors/
You can add a class to each item. You would need to amend your code that is called when the button is clicked to handle this.
Let's say you gave all titles a class of "myTitle" and you gave all descriptions a class of "myDescription". Your div created would look something like this:
<div id="container1">
<input type="text" id="title" class="myTitle">
<br />
<input type="text" id="description" class="myDescription">
</div>
Now, in order to get all titles and descriptions you'd use jQuery and say:
$('.myTitle').each(function () {
console.log($(this).val());
});
$('.myDescription').each(function () {
console.log($(this).val());
});
First of all, you have multiple divs with the id "title" and "description", so change those to class. You can select the nth div with jquery: $("#container" + n)
you can select the title of the nth div: `$("#container" + n).children(".title");
you can select all of the divs by adding a class to them, such as .container

Using JQuery on changing sibling input of the same div group only

So I've been working on a code that would try to pre-fill some disabled inputs with a keyup() function from another enabled input that are all enclosed in one div element. What happens is that upon key release, it tries to change the value of the disabled inputs from that specific row of divs. Here's what I currently have on my code
<div class="container-fluid" id="clonegrp">
<div class="row grpit">
<div class="col-md-7">
<input type="text" name="it[]" class="form-control" id="item" placeholder="Chemical/Equipment*" required="true">
</div>
<div class="col-md-2">
<input type="text" name="amount[]" class="form-control" placeholder="Amount*" required="true">
</div>
/<div class="col-md-1">
<input type="text" class="form-control" id="max" placeholder="Max" readonly="readonly">
</div>
<div class="col-md-1">
<input type="text" class="form-control" id="unit" placeholder="Unit" readonly="readonly">
</div>
</div>
so this group of inputs can be cloned by some button and through this JQuery code
var $button2=$('#add-item'),
$row2=$('.grpit').clone(),
$try2=$('#clonegrp');
$button2.click(function() {
$row2.clone().appendTo($try2);
});
the problem lies at the part where I try to do the live keyup function
$(document).ready(function() {
$('#clonegrp').on('keyup','#item', function() {
$('#max').val('some text');
});
});
I know that this is wrong since the id part would mess up which of the cloned inputs with the #max id gets to change the input. I can't seem to figure out how to get the #max sibling of the currently focused #item input. How do I do that?

how to expand/collapse and add new lines to a div on clicking in a button

I have some divs and when clicking on the button Expand/collapse i need a function that allows my client to add more divs on the form or not, like on the picture attached
i have tried the follwing code, its not working when clicking on the button, nothing happens
<div class="divVisible" id="mytable">
<p><label class="field2">Centro de Custo:</label><input type="text" class="text" id="centroCusto" name="centroCusto"></p>
<p><label class="field">Conta Contabil:</label><input type="text" class="text" id="contaContabil" name="contaContabil"/></p>
<p><label class="field">Periodo:</label><input type="text" class="num" id="date" name="date"/></p>
<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>
<p><label class="field">Saldo Total:</label><input type="text" class="num" id="saldoTotal" name="saldoTotal"/></p>
</div>
<input id="show_hide" type="button" value="Collapse/Expand" />
</div>
</fieldset>
</form>
</body>
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>');
});
</script>
If you append the HTML you will just be creating a new element each time you click. You could always just have the HTML on the page with display:none, and then use jQuery .toggle() or .slideToggle() to expand/collapse.

Adding and deleting a clone in jQuery?

I've managed to get my adding a clone button working but im now having trouble with getting the delete button to work. Wondering if people can see the problem im guessing im totally wrong.
This is the code in jsfiddle
http://jsfiddle.net/AFfa2/
<div class="question">
<div class="questiontext">
20. Details of Children
</div>
<div id="question20">
<div class="questiontitles">
Family Name<br>
Given Names<br>
Sex<br>
Date of Birth<br>
Country of Birth
</div>
<div class="questionanswer">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
</div>
</div>
</div>
<div id="Child" class="question">
<div id="addChild" class="questiontitles">
<input type="button" value="Add Child Info">
</div>
<div id="deleteChild" class="questionanswers">
<input type="button" value="Delete Child Info">
</div>
</div>
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$("#deleteChild").click(function() {
if(childId > 0) childId--;
$("#child"+childId).slideUp();
if ($("#deleteChild").css("display") == "none") $("#deleteChild").slideUp();
});
Try this Answer
$("#addChild").click(function () {
var newElement = $('<div id="childdiv"/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
childId++;
});
$("#deleteChild").click(function () {
var div = document.getElementById('childdiv');
if (div) {
div.parentNode.removeChild(div);
}
});
$("#addChild").click(function(){
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function() {
if($(".question20").length!=1)
$(".question20:last").remove();
});
<div class="question20"> //and the div got class instead of id since cloning the div with same id is not good
http://jsfiddle.net/AFfa2/4/
DEMO
updated code posted by rps
as it deletes all the div elements. Modified it not delete the original form element.
$("#addChild").click(function () {
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function () {
if ($('.question20').length > 1) {
$(".question20:last").remove();
}
});
Try this jsfiddle
<div id="question20" class="input">
<div id="question20">20. Details of Children
<br>Family Name
<input type="text" name="children" class="textbox">
<br>Given Names
<input type="text" name="children" class="textbox">
<br>Sex
<input type="text" name="children" class="textbox">
<br>Date of Birth
<input type="text" name="children" class="textbox">
<br>Country of Birth
<input type="text" name="children" class="textbox">
<br>
</div>
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
</div>
<div id="addChild" class="input">
<input type="button" value="Add Child Info">
</div>
jQuery code
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$('#removeChild').click(function(){
$(this).parent().remove();
});
This might work
$("#deleteChild").click(function() {
$('#question20').parent().children('.input:last').remove();
});
http://jsfiddle.net/HLpJP/
You've got issues around where your inserting the new rows however. Your inserting new rows after question20, these will appear before existing ones. The remove method will remove the last one so might not be the behaviour you want.
Here is jsfiddle link : http://jsfiddle.net/AFfa2/5/
add remove button
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
and jquery
$("#removeChild").click(function(){
$('div.input').get($(this).length).remove();
});
you need to change buttons div classes

Categories