javascript - 我如何使用 jQuery 将一个按钮替换为另一个按钮

Question

我有一个ADD 按钮，点击它会添加一个表单域。我希望新的表单字段按钮在添加到 REMOVE 按钮时发生变化。如何更改按钮(请记住我仍在学习 jquery)。这是我的代码

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>

脚本

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

Answer 1

有两种选择。创建两个按钮并隐藏/显示它们，或者您可以使用一个按钮并将其内容更改为您需要的内容。当然，对于第二个选项，您必须检查点击事件是删除还是添加。

我想这就是你要找的

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