CODEWITHSUNDEEP
javascriptjquery
cphill
cphill

Reputation: 5914

jQuery Field Not Being Removed After Appending it

I am running into an issue where I can't seem to get my jQuery script to remove fields after they have been added. I have tried a few changes, but nothing has worked. 

$(function() {
  var dataSourceField = $('#sign-up-organization-discovery-source');
  var i = $('#sign-up-organization-discovery-source p').size() + 1;

  $('#sign-up-add-discovery-source').on('click', function() {
    $('<p><label for="discovery-source-field"><input type="text" id="discovery-source-field" size="20" name="discoverySource" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(dataSourceField);
    i++;
    return false;
  });
  $('#remScnt').on('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-md-6 col-md-offset-3">
    <form action="/app/sign-up/organization" method="post">
      <p>{{user.email}}</p>
      <input type="hidden" name="admin" value="{{user.email}}">
      <input type="hidden" name="organizationId">
      <label for="sign-up-organization">Company/Organization Name</label>
      <input type="text" class="form-control" id="sign-up-organization" name="organizationName" value="" placeholder="Company/Organization">
      <a href="#" id="sign-up-add-discovery-source">Add Another Discovery Source</a>
      <div id="sign-up-organization-discovery-source">
        <input type="text" id="discovery-source-field" placeholder="Discovery Source" name="discoverySource">
      </div>
      <br />
      <button type="submit">Submit</button>
    </form>
    <a href="/login">Already have an account? Login here!</a>
  </div>
</div>

Upvotes: 1

Views: 32

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

$('##sign-up-organization-discovery-source').on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240928

There are a couple problems here.

  • Firstly, an id is suppose to be unique! You are duplicating id attribute values each time you append the element.

  • Secondly, even if you were to use a class rather than an id, it still wouldn't work as expected because the clickable/removable a element doesn't exist in the DOM when you are attaching the event listeners.

You would either need to attach the event after appending the element, or you could use event delegation and attach the event to a common parent element that exists at the time.

Example Here

$('#sign-up-organization-discovery-source').on('click', '.remove', function() {
   // ...
});
  • I changed <a href="#" id="remScnt">Remove</a> to: <a href="#" class="remove">Remove</a>.
  • Then I delegated the click event to the #sign-up-organization-discovery-source element.

Upvotes: 3

Related Questions