How to append an element on click in jQuery

Question

Removing div element automatically after appending it on click. It removes the element after it adds or appends inside form tag.

$('.add').on('click', function() {
  $('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
  <div class="form-group add-input">
    <input type="text" placeholder="add someting...">
    <button class="add">+</button>
  </div>
</form>

button type should be button, by default it's submitting the form — Abhishek Pandey
– Abhishek Pandey, Commented Dec 24, 2020 at 6:41

Giorgos Betsos · Accepted Answer · 2020-12-24 06:39:33Z

3

After clicking on the + button the <div> element is appended to the form as expected. But then the form is submitted to the server. When the page reloads the html of the page is rendered again and thus the appended <div> element dissappears.

You can change the type of the button like this

 <button type="button" class="add">+</button>

and add another button for sumitting the form.

answered Dec 24, 2020 at 6:39

Giorgos Betsos

72.3k10 gold badges69 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Onkar · Accepted Answer · 2020-12-24 06:55:50Z

3

add type="button" to existing button tag and work well and not submitting while clicking on it.

$('.add').on('click', function() {
  $('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
  <div class="form-group add-input">
    <input type="text" placeholder="add someting...">
    <button type="button" class="add">+</button>
  </div>
</form>

edited Dec 24, 2020 at 6:55

answered Dec 24, 2020 at 6:44

Onkar

2,5942 gold badges16 silver badges16 bronze badges

3 Comments

Abhishek Pandey Over a year ago

you are missing button type in JS

Abhishek Pandey Over a year ago

clicking on newly added buttons will submit page

Onkar Over a year ago

Use $(document).on('click','.add', function() instead of $('.add').on('click', function()to add click support for JS appended buttons

Collectives™ on Stack Overflow

How to append an element on click in jQuery

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related