I have this code to automatically fill up phrases below as you type inside the text boxes.
If you click "add person", it will append text boxes and a phrase for the new person. You can type their info and it will still automatically fill up new phrases.
I added also a remove button for each new added person. It removes the text boxes and the phrase below for the respective person.
As you will see, there is a problem: when you click "remove", it won't delete "Bye, {name}"
I have commented my code so you can help me. How do I select the "third appended element" ("Bye, {name}") to remove it too?
var name1 = document.getElementById('name');
name1.addEventListener('input', function() {
var result = document.querySelector('span.one');
result.innerHTML = this.value;
});
var name1 = document.getElementById('name');
name1.addEventListener('input', function() {
var result = document.querySelector('span.four');
result.innerHTML = this.value;
});
var name1 = document.getElementById('city');
name1.addEventListener('input', function() {
var result = document.querySelector('span.two');
result.innerHTML = this.value;
});
var name1 = document.getElementById('age');
name1.addEventListener('input', function() {
var result = document.querySelector('span.three');
result.innerHTML = this.value;
});
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var input_container = $(".container"); // holds all input containers
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
/* FIRST APPENDED ELEMENT */
$(wrapper).append("<div class='container" + x + "' ><label>Name</label><input type='text' class= 'name' name='mytext[]'><a href='#' class='remove_field'>Remove</a><br><label>City</label><input type='text' class= 'city' name='mytext[]'><br><label>Age</label><input type='text' class= 'age' name='mytext[]'></div>");
/* SECOND APPENDED ELEMENT */
$('div.hello').append('<div id="container' + x + '" id = "' + x + '" >Hello, <span class="name"></span> <span> ,from</span> <span class="city"></span> <span> Your age is:</span><span class="age"> </span><br><br></div>');
/* THIRD APPENDED ELEMENT */
$('div.hello').append('<div id="container' + x + '" id = "' + x + '" >Bye, <span class="name"></span><br><br></div>');
$('input').on('input', function(e) {
var parcontainer = $(this).parents('div').attr('class');
spantoappend = $(this).attr('class');
var val = $(this).val();
var sel = "#" + parcontainer + ' .' + spantoappend;
// var sel = "#" + divtoappend + " span";
$(sel).text('');
$(sel).append(val);
});
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
/* THIS REMOVES SECOND APPENDED ELEMENT */ /* HOW DO I MAKE THIS REMOVE THIRD APPENDED ELEMENT TOO? */
var rem = $(this).parents('div').attr('class');
$('#' + rem).remove();
/* THIS REMOVES FIRST APPENDED ELEMENT */
$(this).parent('div').remove();
x--;
});
});.block {
display: block;
}
input {
width: 50%;
display: inline-block;
margin: 4px;
margin-left: 10px;
}
span.add,
span.remove {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}
label {
display: inline-block;
width: 40px;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add person</button>
<br><br>
<div class="container">
<label>Name</label><input type="text" id="name" name="mytext[]"> <br>
<label>City</label><input type="text" id="city" name="mytext[]"> <br>
<label>Age</label><input type="text" id="age" name="mytext[]">
</div>
</div>
<br>
<div class="hello">
Hello, <span class="one"></span>, from <span class="two"></span>. Your age is: <span class="three"></span><br><br>
Bye, <span class="four"></span><br><br>
</div>
<div class="bye">
</div>
