remove appendElement javascript

Question

I have this code that when the user will click the Add button a Textbox will appear. But what I want to implement is to remove the textbox that was appended individually by clicking a button:

<div class="form_group">
   <div id="p_scents">
      <a class="btn btn-warning btn-sm" onclick="addAffiliate()">+ Add Merchant ID</a><br>
      <a class="btn btn-warning btn-sm" onclick="deleteAffiliate()">+ Remove Merchant ID</a><br>
      <p></p>
   </div>
</div>

My Javascript is:

function addAffiliate() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;
    $('<p><label for="p_scnts"><input type="text" required="true" id="p_scnt" size="30" class="form-control" name="merchant[]" value="" placeholder="Input MerchantID" /></label>  </p>').appendTo(scntDiv);
    i++;
}

My deleteAffiliate function is where I want to delete a single textbox that was appended before.

remove() with jquery and remove() with javascript

Benjamin
– Benjamin

2014-11-19 08:20:22 +00:00
Commented Nov 19, 2014 at 8:20 — Benjamin
– Benjamin, Commented Nov 19, 2014 at 8:20
But what I want to add is to remove? o.O

Tomas Ramirez Sarduy
– Tomas Ramirez Sarduy

2014-11-19 08:21:44 +00:00
Commented Nov 19, 2014 at 8:21 — Tomas Ramirez Sarduy
– Tomas Ramirez Sarduy, Commented Nov 19, 2014 at 8:21
It's little bit unclear.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-11-19 08:24:55 +00:00
Commented Nov 19, 2014 at 8:24 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Nov 19, 2014 at 8:24
im sorry for making it unclear..already edited

Zurreal
– Zurreal

2014-11-19 08:42:10 +00:00
Commented Nov 19, 2014 at 8:42 — Zurreal
– Zurreal, Commented Nov 19, 2014 at 8:42

Lashus · Accepted Answer · 2014-11-19 08:30:58Z

1

First of all you are appending several elements with same id "p_scnt" and you should avoid that. Change the function to:

function addAffiliate()
{
   var scntDiv = $('#p_scents');
   var i = $('#p_scents p').size() + 1;
   // here we change the id to p_scnt_ + iterator
    $('<p><label for="p_scnts"><input type="text" required="true" id="p_scnt_'+i+'" size="30" class="form-control" name="merchant[]" value="" placeholder="Input MerchantID" /></label>  </p>').appendTo(scntDiv);
            i++;

}

Then change the remove function to remove the last-child of parent.

function deleteAffiliate()
{
    $('#p_scents p:last-child').remove();
}

answered Nov 19, 2014 at 8:30

Lashus

3991 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

remove appendElement javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related