How to add and remove an input element with attributes using jquery

Question

I have to add and remove an input field in div with id "add", So the following code is not working.

<div id="add">
</div>

<button id="add-el">Add</button>
<button id="add-el">Remove</button>

$("#add-el").on("click", funtion () {

   var input = $("<input class=\"some-class\" type=\"email\" name=\"email\" 
    required=\"\" placeholder=\"Enter your address\" autocomplete=\"off\">");
   $("#add").append(input);

});

$("#remove-el").on("click", funtion () {

   $("#add").remove(input);

});

you cannot access the input variable inside the click function of the #remove-el. input is a local variable of the #add-el click function. — Mihai T
– Mihai T, Commented Jul 20, 2018 at 7:07

Satpal · Accepted Answer · 2018-07-20 07:10:05Z

1

Create element using jQuery(html, attributes) instead of string concatenation.

You can use .empty() to clear the <div> content. Or, define input variable outside event handler and use it to remove the element.

var input;
$("#add-el").on("click", function() {
  input = $('<input />', {
    "class": "some-class",
    "type": "email",
    "placeholder": "Enter your address"
  });

  $("#add").append(input);
});

$("#remove-el").on("click", function() {
  //$("#add").empty();

  if (input && input.length) {
    input.remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add">
</div>

<button id="add-el">Add</button>
<button id="remove-el">Remove</button>

edited Jul 20, 2018 at 7:10

answered Jul 20, 2018 at 7:03

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

4 Comments

Esko Over a year ago

He also has other problem (in remove) with the input-variable not being global, maybe add that also here, was about to answer :)

Aditya Over a year ago

Satpal - what is OP here?

Satpal Over a year ago

@Aditya, You are OP(Original Poster)

Aditya Over a year ago

Thank you satpal, will upvote and accept your answer once checked

t.niese · Accepted Answer · 2018-07-20 07:12:32Z

There are multiple problems in your code.

You have a SyntaxError because you have a new line before required=\"\" and you write funtion instead of function

var input

$("#add-el").on("click", function() {

  input = $("<input class=\"some-class\" type=\"email\" name=\"email\" required = \"\" placeholder=\"Enter your address\" autocomplete=\"off\">");
  $("#add").append(input);

});

$("#remove-el").on("click", function() {
  input.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add">
</div>

<button id="add-el">Add</button>
<button id="remove-el">Remove</button>

And IDs have to be unique, you must not have to elements with the id add-el.

And you cannot access the input you defined in the add-el callback in the remove-el callback.

Bhumi Shah · Accepted Answer · 2018-07-20 07:28:19Z

0

There is issue in your code: https://codepen.io/creativedev/pen/pZNOwq

Change funtion to function and it will work. See demo

$("#add-el").on("click", function () {

   var input = $("<input class=\"some-class\" type=\"email\" name=\"email\" required=\"\" placeholder=\"Enter your address\" autocomplete=\"off\">");
   $("#add").append(input);

});

answered Jul 20, 2018 at 7:28

Bhumi Shah

9,50210 gold badges69 silver badges110 bronze badges

Collectives™ on Stack Overflow

How to add and remove an input element with attributes using jquery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related