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

您可以操作正在创建的动态dom对象，就像您可以在jquery中操作任何dom对象一样。例如，你可以做一些事情（只是一个poc，需要继续努力）：

$(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);
      })
});

Answer 2

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

）

我认为这就是你要找的东西

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

Answer 3

将此添加到您的$('.addbtn').on('click'...); ...

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

并将其添加到你的addbtn下面的html中......

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

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

3 个答案: