We Keep Coding

How to dynamically add form elements in jquery?

I'm trying to created a dynamic form in rails with a little bit of javascript I have a problem I only get one row in the output when using pry apparently it's because I have the same params for every field input since I use jQuery .clone, maybe someone has struggled with something similar can share some knowledge, how to dynamically add index to params in this form with javascript ?
#extends('Admin.master')
#section('content')
<div class="p-5">
<h3><i class="fas fa-cog ml-2"></i>Setting</h3><hr>
<form action="{{ route('settings.update', $setting->id) }}" method="POST" >
#csrf
#method('PUT')
<div id="showDynamic">
</div>
</form>
</div>
#endsection
#section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
let count = 1;
$('.add').click(function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary" id="add">Add</a>\n' +
'<a class="btn btn-danger" id="delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
</script>
#endsection

1st id must be unique .. So change id="add" and id="delete" to classes class="btn btn-primary add"
2nd event-binding-on-dynamically-created-elements After changing the id to class use $(document).on('click' , '.add' , function(){ //code here })
Your code should be
<script>
$(document).ready(function(){
let count = 1;
$(document).on('click' , '.add' , function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary add">Add</a>\n' +
'<a class="btn btn-danger delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
</script>
$(document).ready(function(){
let count = 1;
$(document).on('click' , '.add' , function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary add">Add</a>\n' +
'<a class="btn btn-danger delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showDynamic"></div>

dynamically Created html link does not work [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
After creating a batch of Html nodes, The link does not work!
How can I fix it?
Javascript Codes:
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
Exactly this line of code:
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>'
I expect this event to fire after clicking the tag that I have created dynamically.
But it doesn't work!
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
});

var collapseId = document.getElementById('collapseId')
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
console.log(nodeId);
});
<div id="collapseId"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
it works fine :)

Remove dynamically generated textboxes

I have the following javascript that dynamically add textboxes together with a remove button to a div. How can I using the remove button delete the content of the row being selected to delete?
<script type="text/javascript">
function GetDynamicTextBox(value) {
return('' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Key" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.StartDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.EndDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.Description" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>' +
'</div>');
}
function AddTextBox() {
var div = document.createElement('DIV');
div.className = "form-group";
div.innerHTML = GetDynamicTextBox("");
document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(div) {
//document.getElementById("divcontent").removeChild(div.parentNode); // this does not work
iterateBoxesAndSetUniqueIds();
}
function iterateBoxesAndSetUniqueIds() {
// Set unique names of each textbox
var children = document.getElementById("divcontent").children;
for (i = 0; i < children.length; i++)
{
var el = children[i];
el.name = 'events[' + i + '].Key'; //
el.id = 'events[' + i + '].Key';
el.name = 'events[' + i + '].Value.StartDate';
el.id = 'events[' + i + '].Value.StartDate';
el.name = 'events[' + i + '].Value.EndDate';
el.id = 'events[' + i + '].Value.EndDate';
el.name = 'events[' + i + '].Value.Description';
el.id = 'events[' + i + '].Value.Description';
}
}
</script>
<button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>
<div id="divcontent">
</div>
UPDATE
I added a snippet for updating the id for each textbox, but obviously I am doing something wrong here. Can anyone help with this too?

I assume you want to remove the entire row, so heres how to do that.
You almost had it, since you pass (this) in the onclick, it means we have a direct reference to the button that was clicked. From there, we can get its grandparent by using .parentNode twice (since the first parent is .col-md-2) and then use the remove() function.
div.parentNode.parentNode.remove()
function GetDynamicTextBox(value) {
return('' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Key" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.StartDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.EndDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.Description" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>' +
'</div>');
}
function AddTextBox() {
var div = document.createElement('DIV');
div.className = "form-group";
div.innerHTML = GetDynamicTextBox("");
document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(div) {
div.parentNode.parentNode.remove()
}
<button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>
<div id="divcontent">
</div>

function GetDynamicTextBox(value, uniquedId) {
return('' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Key" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.StartDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.EndDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.Description" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(\'' + uniquedId +'\')"><i class="fa fa-angle-right"></i> Remove</button>' +
'</div>');
}
function AddTextBox() {
var uniquedId = Math.floor(Math.random() * 100) + '_unique';
var div = document.createElement('DIV');
div.setAttribute("id", uniquedId);
div.className = "form-group";
div.innerHTML = GetDynamicTextBox("", uniquedId);
document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(uniquedId) {
var elem = document.getElementById(uniquedId);
return elem.parentNode.removeChild(elem);
}
<button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>
<div id="divcontent">
</div>
<script type="text/javascript">
function GetDynamicTextBox(value, uniquedId) {
return('' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Key" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.StartDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.EndDate" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <input type="text" name="events[0].Value.Description" value=""/>' +
'</div>' +
'<div class="col-md-2">' +
' <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(\'' + uniquedId +'\')"><i class="fa fa-angle-right"></i> Remove</button>' +
'</div>');
}
function AddTextBox() {
var uniquedId = Math.floor(Math.random() * 100) + '_unique';
var div = document.createElement('DIV');
div.setAttribute("id", uniquedId);
div.className = "form-group";
div.innerHTML = GetDynamicTextBox("", uniquedId);
document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(uniquedId) {
var elem = document.getElementById(uniquedId);
return elem.parentNode.removeChild(elem);
}
</script>
<button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>
<div id="divcontent">
</div>

Remove DIV dynamically with JQuery

i have a problem to reference an identifier of a DIV. I allow to add a div with a text field and a button to delete the text field, and i set a id to the DIV like an array with this code:
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="eliminacorso['+$count+']" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
So.. if i press on the botton at the at the side of the text area, i'll call a function that will remove it.
The skeleton of the function is the follow:
$('#eliminacorso[]').on('click', function() {
$count --;
$('#corso[]').remove();
});
So my ask is: How can i insert between the square brackets the right identifier of the div?

A better choice is:-
1.Instead of using id use button class
2.And then use event delegation concept like below:-
$(document).on('click','.btn-default',function(){
$(this).closest('.form-group').remove();
});
Reference:- https://api.jquery.com/closest/

Use as below the script that add DIV. Remove '[' from id attribute from div tag and anchor tag as below
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso'+$count+'>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="corso'+$count+'" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
And then script to get the clicked id and remove the matched div on click of button as below
$('.btn').on('click', function() {
var selectedId = $(this).attr('id');
$('#'+selectedId).remove();
});

Try below code.It may help you
var $count =0
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso_'+$count+'">' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso_'+ $count + '"/>' +
'<a class="btn btn-default" id="eliminacorso_'+$count+'" aria-label="Elimina" onclick="remove(this);">' +
'Test' +
'</a>' +
'</div>' +
'</div>' +
'');
});
function remove(aRemove){
console.log(aRemove);
var divid = aRemove.id.replace("eliminacorso_","corso_");
$("#" + divid).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="aggiungi"> Click ME </button>
<div id="corsi">
</div>

https://codepen.io/vino4all/pen/vZrQEX
Try this code.
<button id="aggiungi">Click</button>
<div id="corsi"></div>
Add a class attribute to the <a> tag.
var $count = 0;
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default delBtn" id="eliminacorso['+$count+']" aria-label="Elimina"><span>X</span>' +
'<i class="fa fa-times" aria-hidden="false"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
$('#corsi').on('click', '.delBtn', function() {
console.log('this :'+$(this));
$count --;
$(this).parent().parent().remove();
});
Notice the usage of on function.
It should be like below
$('#corsi').on('click', '.delBtn', fun);

You can use something like this
var count = 3;
$('button').click(function(){
count--;
$($('.corso')[count]).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="corso">1. <input type="text" /></div><br />
<div class="corso">2. <input type="text" /></div><br />
<div class="corso">3. <input type="text" /></div><br />
<br />
<button>Remove</button>

Try this:
var $count = 0
$('#aggiungi').on('click', function () {
$count++;
let divId = `input_div_${$count}`;
let html = `<div class="form-group row" id="${divId}">
<label class="col-sm-2 col-form-label" for="corsi">Input ${$count}</label>
<div class="col-sm-10 form-inline">
<input type="text" class="form-control" id="input" name="${divId}"/>
<button type="button" id="remove_btn_${$count}" aria-label="Elimina" onclick="remove('${divId}');">
remove
</a>
</div>
</div>`;
$('#main-div').append(html);
});
function remove(removeDivId) {
console.log(removeDivId);
$("#" + removeDivId).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aggiungi"> Click ME </button>
<div id="main-div">
</div>

how to disable link after clicking once with jquery

How can i disable a link after clicking on it once with jquery . on clicking the link its adding an input field inside a div with unique id. I am getting the values in a dropdown from a variable.
$(document).ready(function() {
var count = 1;
$(".block").on('click', function(){
$("#textInput").append(
'<div class="cgparent" id="input'+count+'">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<div class="col-md-4">' +
'<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</div>' + '<br><br>' +
'</div>'
).show();
count++;
});
});
<?php if ($table_name == "questions") {?>
<div class="dropdown" >
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php
$question_fields = $this->db->list_fields('questions');
for ($i=0; $i<count($question_fields); $i++){?>
<li><a class="block" ><?php echo $question_fields[$i]?></li>
<?php } ?>
</ul>
</div>
<?php } ?>

If adding some CSS is ok for you this is the simplest I had found:
Javascript:
$(document).on('click', '#buttonSelector', function () {
$(this).addClass('disabled');
});
CSS:
.disabled {
/* if you also want it to fade a bit:
opacity: 0.5
*/
pointer-events: none;
cursor: default;
}

Using the following code will set a variable true once the link is clicked. After the link is clicked again it will ignore the click.
$(document).ready(function() {
var count = 1;
var clicked = false;
$(".block").on('click', function(e){
if(clicked) {
e.preventDefault();
}
clicked = true;
$("#textInput").append(
'<div class="cgparent" id="input'+count+'">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<div class="col-md-4">' +
'<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</div>' + '<br><br>' +
'</div>'
).show();
count++;
});
});

I would do it by setting a counter. If the counter is higher than zero, that means the link has been clicked.
<a class="once-only" href="/do-stuff">Click me</a>
<script type="text/javascript">
$(document).ready(function ($) {
var clicked = 0;
$(document).on('click', '.once-only', function () {
if (clicked != 0) {
return false;
}
var clicked = clicked + 1;
});
});
</script>
Update
The comments brought this solution:
<script type="text/javascript">
$(document).ready(function ($) {
$(document).on('click', '.once-only', function () {
​$(this).contents().unwrap();​​
});
});
</script>
The above will simply remove the anchor.