用户单击删除按钮时如何获取当前（添加）按钮

Posted 2023-02-23

【中文标题】用户单击删除按钮时如何获取当前（添加）按钮

【英文标题】：How to get current (add) button when user click on remove button

【发布时间】：2018-10-26 12:18:40

【问题描述】：

我的脚本是，当用户单击添加按钮时，然后在下一个字段中添加按钮隐藏和删除按钮显示。这是完美的。现在我想当用户单击删除按钮然后自动在当前字段中显示上一个添加按钮。

请告诉我该怎么做。

这是我的脚本：-

 ! function(a) 
"use strict";
a(function() 
    var b = a(".wpcf7-field-groups");
    b.length && (b.each(function() 
        a(this).data("group-model", a(this).find(".wpcf7-field-group").eq(0).clone())
    ), a("body").on("wpcf7-field-groups/change", ".wpcf7-field-groups", function() 
        var b = a(this).find(".wpcf7-field-group");
        b.each(function(b) 
            a(this).find(".wpcf7-field-group-remove").toggle(b > 0);

            var c = b + 1;
            a(this).find("[name]").each(function() 

                var b = a(this),
                    d = b.closest(".wpcf7-form-control-wrap"),
                    e = b.attr("name"),
                    f = e.indexOf("[]") > -1,
                    g = e.replace("[]", ""),
                    h = g.replace(/__[0-9]*/, "") + "__" + c;
                d.length && !d.hasClass(h) && d.removeClass(g).addClass(h), h += f ? "[]" : "", b.attr("name", h)
            )
        ), a(this).find(".wpcf7-field-group-count").val(b.length)
    ), b.trigger("wpcf7-field-groups/change"), a("body").on("click", ".wpcf7-field-group-add, .wpcf7-field-group-remove", function(e) 
        var b = a(this),
            c = b.closest(".wpcf7-field-groups");
        if (b.hasClass("wpcf7-field-group-add")) 
              e.currentTarget.style.display = "none"; //ADD THIS LINE
            var d = c.data("group-model").clone();
            c.append(d), b.trigger("wpcf7-field-groups/added");
         else b.trigger("wpcf7-field-groups/removed"), b.closest(".wpcf7-field-group").remove();

        return c.trigger("wpcf7-field-groups/change"), !1
    ))
)
(jQuery);

这里是实时代码链接：- https://codepen.io/anon/pen/ZqwORX

请提前检查并告诉我如何解决这个问题，非常感谢

【问题讨论】：

如果你把整个代码而不是缩小版本会很好

感谢您的评论，请检查我的完整代码与工作codepen.io/anon/pen/ZqwORX

希望这对你有帮助，你可以帮助我，谢谢

【参考方案1】：

您可以使用jQuery：

$("#remove").hide();
var num = 0;

$("#add").click(function() 
  $("#remove").show();
  num += 1;
  var element = document.createElement("div");
  element.setAttribute("id", num);
  element.setAttribute("class", "wpcf7-field-group");
  element.innerhtml = '<div class="col-md-6 col-sm-6 col-xs-12"><label>Test Held<br><span class="wpcf7-form-control-wrap certification-held__1"><input type="text" name="certification-held__1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span></label></div><div class="col-md-6 col-sm-6 col-xs-12"><label>Date:<br><span class="wpcf7-form-control-wrap certificate-date__1"><input type="date" name="certificate-date__1" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false"></span></label>';
  document.getElementById("results").appendChild(element);
);
$("#remove").click(function() 
  if ((num - 1) === 0) 
    $("#remove").hide();
  
  document.getElementById(num).remove();
  num += -1;
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="results">
  
</div>

<button id="add">Add</button>
<button id="remove">Remove</button>

这里，jQuery 正在设置事件监听器。当用户单击任一按钮时，它会切换按钮。下面是对jQuery函数的解释：

.hide()

隐藏选定的元素。

.show()

显示选中的元素。

.toggle()

在隐藏和显示之间切换所选元素。

.toggle() 等同于：

if ($(element).is(":visible")) 
    $(element).hide();
 else if ($(element).is(":hidden")) 
    $(element).show();

【讨论】：

非常感谢，请您在我的脚本上做这个。

对不起！你的剧本太复杂了。我已编辑答案以添加您的表单。