jquery - 如何删除 jQuery 中动态创建的内容

Question

我有一个表单需要添加和删除文本框。

我的添加文本框部分正常工作。当您单击加号按钮时，会添加新的文本框 - 没问题。

但是，当我单击垃圾桶按钮时，我无法删除文本框条目。

有什么想法吗？

这是 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;
}

此外，如果您对如何防止每次点击提交表单有任何想法，那就太棒了。现在，即使我有 return false 存在，每次点击都会提交表单。

这是我想要工作的代码:

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
}

Answer 1

this 未在该范围内定义。如果您将 .bind(this) 绑定(bind)到 onclick 属性中的函数上，您的代码将按预期工作。

$(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>