How do i replace a button with another using jQuery

Question

I have an ADD button that adds a form field when clicked on. I want the new form field button to change when it is added to a REMOVE button. How do I change the buttons (keep in mind I'm still learning jquery). Here's my code

HTML

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }} inputFields">
<label for="name" class="col-md-4 control-label">Name</label>

<div class="col-md-6">
    <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>

    @if ($errors->has('name'))
        <span class="help-block">
            <strong>{{ $errors->first('name') }}</strong>
        </span>
    @endif
</div>

<a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a>
</div>

Script

$(document).ready(function(){
      $(".addbtn").on('click', function(){
            var ele = $(this).closest('.inputFields').clone(true);
            $(this).closest('.inputFields').after(ele);
      })
});

Schlumpf · Accepted Answer · 2017-06-22T16:37:50.623

3

There are two options. Create two buttons and hide/show them or you can use one button and change its content to what you need. Of cours with the second option you have to check the click event if it should be a delete or an add.

I think this is what you are looking for

$(document).ready(function(){
    $(".deletebtn").hide();

      $(".wrapper").on('click', '.addbtn', function(){
            var ele = $(this).closest('.inputFields').clone(true);
            $(this).closest('.inputFields').after(ele);
            
            var el = $(this).closest('.inputFields').next();
            el.find('.addbtn').hide();
            el.find('.deletebtn').show();
      });
      
      $(".wrapper").on('click', '.deletebtn', function(){
        $(this).closest('.inputFields').remove();
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="form-group inputFields">
    <label for="name" class="col-md-4 control-label">Name</label>

    <div class="col-md-6">
        <input id="name" type="text" class="form-control" name="name" value="" required autofocus>
    </div>

    <a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Add</a>
    <a class="deletebtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Remove</a>
  </div>
</div>

edited Jun 22 '17 at 16:37

answered Jun 22 '17 at 16:32

Schlumpf

358
1
3
13

`$(".removebtn").on('click', function(){ $(this).closest('.inputFields').remove(); })` this isn't removing the div. See anything I'm doing wrong? – Mena Jun 22 '17 at 16:57
I don't know if jQuery will find your element when you are calling $(".removebtn").on. You will add a second button dynamically and so jquery won't recognize that when you set an event on top of the button class. That's why I have created the wrapper div in order to use $(".wrapper").on('click', '.deletebtn', function(){. Check if that helps. With this code jQuery is looking inside the .wrapper for a class called .deletebtn in order to find the dynamic added button. Test my code as I have pasted it into the live tester (Run code snippet button), you can click on remove and it will work – Schlumpf Jun 22 '17 at 17:05
Have a look to this link, that's similiar to your problem with binding jquery events on dynamic content: https://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items "You have to add click event to an exist element. You can not add event to dom elements dynamic created. If you want to add event to them, you should bind event to an existed element using .on." – Schlumpf Jun 22 '17 at 17:09
Ok! That worked like magic. I need to process your explanation very well. – Mena Jun 22 '17 at 17:10

score 1 · Answer 2 · answered Jun 22 '17 at 16:26

1

Add this to your $('.addbtn').on('click'...);...

$('.addbtn').hide();
$('.removebtn').show();

And add this to your html right below your addbtn...

<a class="removebtn">
    <i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</a>

answered Jun 22 '17 at 16:26

notphilphil

385
5
16

score 1 · Answer 3 · answered Jun 22 '17 at 16:28

1

you can manipulate the dynamic dom object you are creating, just as you can manipulate any dom object in jquery. for example, you could do something like (just a poc, needs to keep working on this):

$(document).ready(function(){
      $(".addbtn").on('click', function(){
            var ele = $(this).closest('.inputFields').clone(true);
ele.find(".addbtn").replaceWith("HTML FOR REMOVE BUTTON");
            $(this).closest('.inputFields').after(ele);
      })
});

answered Jun 22 '17 at 16:28

Ben Yitzhaki

1,376
16
31

This did the job for me. Now i've got to figure out why I'm not able to remove the div.inputField when the removebtn is clicked. Tried using this `$(".removebtn").on('click', function(){ $('inputFields').remove(); })` – Mena Jun 22 '17 at 16:52
are you using jquery 1.7 or above? otherwise, you'll need to use the ".live" method instead of the ".on". also - you could do something like $(this).parent(".inputFields").remove() so you won't be addressing the wrong .inputFields – Ben Yitzhaki Jun 22 '17 at 16:54

How do i replace a button with another using jQuery

3 Answers3