CODEWITHSUNDEEP
jquery
H. Ferrence
H. Ferrence

Reputation: 8116

How to remove dynamically created content in jQuery

I have a form that needs to add and remove textboxes.

I got the add textbox part working. When you click the plus button, new textboxes are added -- no problem.

However, when I click the trash button, I cannot get the textbox entries to be removed.

Any thoughts?

Here's the fiddle --> https://jsfiddle.net/u4h9ohv6/2/

$( '.fcClick' ).on( 'click', function( event ) {
  if( $( this ).attr( 'name' ) == 'fcButtonMinus' ) {
    $( this ).closest( '.input-group' ).find( 'input' ).val('');
    //$( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
    return false;
  }
  if( $( this ).attr( 'name' ) == 'fcButtonPlus' ) {
    $( 'span#fcAdds' ).append(
      '<div class="col-md-10 persStmtPad input-group" style="margin-top:0.125em;margin-left:35px">' +
        '<input id="fallCourses" name="fallCourses[]" type="text" placeholder="additional Fall Course" class="form-control input-md">' +
        '<div class="input-group-btn">' +
          '<button name="fcButtonMinus" class="btn btn-default btn-md" onClick="fcFunc()" style="background-color:#efefef;color:#999;margin-top:12px" title="Delete this Fall Course"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>' +
        '</div>' +
      '</div>'
    );
    return false;
  }
});

function fcFunc() {
  $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
  return false;
}

Also, if you have any ideas on how to prevent the form from submitting on each click, that would be awesome. Right now every click submits the form even though I have return false present.

Here is the code I am trying to make work:

function fcFunc() {
  $( this ).closest( '.input-group' ).find( 'input' ).val('');
  $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
  //$( this ).closest( "div.input-group" ).focus(); // did not stop form submit
  $( this ).submit( function( event ) {
    event.preventDefault(); // does not stop form from being submitted
  });
  return alert('interception'); // this works
  return false; // this too does not do the trick -- the form still tries to submit
}

Upvotes: 1

Views: 64

Answers (3)

Neil
Neil

Reputation: 14313

this is not defined in that scope. If you bind .bind(this) on the function in the onclick attribute, your code will work as expected.

$(document.body).on( 'click', '.fcClick', function( event ) {
      if( $( this ).attr( 'name' ) == 'fcButtonMinus' ) {
        $( this ).closest( '.input-group' ).find( 'input' ).val('');
        //$( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
        return false;
      }
      if( $( this ).attr( 'name' ) == 'fcButtonPlus' ) {
        $( 'span#fcAdds' ).append(
          '<div class="col-md-10 persStmtPad input-group" style="margin-top:0.125em;margin-left:35px">' +
            '<input id="fallCourses" name="fallCourses[]" type="text" placeholder="additional Fall Course" class="form-control input-md">' +
            '<div class="input-group-btn">' +
              '<button name="fcButtonMinus" class="btn btn-default btn-md" onClick="fcFunc.bind(this)()" style="background-color:#efefef;color:#999;margin-top:12px" title="Delete this Fall Course"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>' +
            '</div>' +
          '</div>'
        );
        return false;
      }
    });

    function fcFunc() {
      $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
      return false;
    }
div.hideContentBlock {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-10 persStmtPad input-group" style="margin-top: 1.5em;margin-left:35px">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <input id="fallCourses" name="fallCourses[]" type="text" placeholder="Fall Course" class="form-control input-md" required="" value="testing">
      <div class="input-group-btn">
        <button name="fcButtonMinus" class="btn btn-default btn-md fcClick" style="background-color:#efefef;color:#999;margin-top:12px" title="Erase this Fall Course" value=""><span class="glyphicon glyphicon-erase" aria-hidden="true"></span></button>
        <button name="fcButtonPlus" class="btn btn-default btn-md fcClick" style="background-color:#efefef;color:#999;margin-top:12px" title="Add another Fall Course" value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
      </div>
    </div><!-- end input-group -->

    <span id="fcAdds"></span>

Upvotes: 2

justDan
justDan

Reputation: 2335

As @nurdyguy said, this is an issue due to you creating elements dynamically. I changed a few things around in your code to get it to work and for a quick demo. Here's a working fiddle: https://jsfiddle.net/u4h9ohv6/8/.

I first added the class of test to the element you wish to create:

<button name="fcButtonMinus" class="test btn btn-default btn-md"...</button>

The biggest change was ditching the function and using something like this:

$(document).on('click', '.test', function() {
   $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
   return false;
});

This was a rough outline, but hopefully will help get you in the right direction =)

Upvotes: 1

MWT
MWT

Reputation: 9

check

    $( document ).on( 'click','.fcClick', function( event ) {

  if( $( this ).attr( 'name' ) == 'fcButtonMinus' ) {
  $(this).parent().parent().remove();

    return false;
  }

Upvotes: 0

Related Questions