Javascript 单击“删除”按钮即可克隆div-但是如何在初始克隆上隐藏“删除”按钮?

Javascript 单击“删除”按钮即可克隆div-但是如何在初始克隆上隐藏“删除”按钮?,javascript,jquery,html,clone,Javascript,Jquery,Html,Clone,所以我在左边有一个大按钮,在右边有一个表单。单击该按钮时,最多会创建5个附加表单。它还更新了id和味道配置文件文本 这仍然是一个小错误,并正在寻找一些帮助整理它,因为我不是最好的与JS 问题1:如果您创建了另外5个克隆,然后将其删除。当您再次创建它们时,它会将它们标记为#7#8#9-因为只允许使用6个表单。我需要这个数字只能显示1-6,不能高于或低于。我也想要同样的身份证 问题2:我遇到的另一个问题是我想从香料配置文件#1(第一种形式)中删除“删除按钮”。因为如果所有的表单都被删除了,就没有什么

所以我在左边有一个大按钮,在右边有一个表单。单击该按钮时,最多会创建5个附加表单。它还更新了id和味道配置文件文本

这仍然是一个小错误,并正在寻找一些帮助整理它,因为我不是最好的与JS

问题1:如果您创建了另外5个克隆,然后将其删除。当您再次创建它们时,它会将它们标记为#7#8#9-因为只允许使用6个表单。我需要这个数字只能显示1-6,不能高于或低于。我也想要同样的身份证

问题2:我遇到的另一个问题是我想从香料配置文件#1(第一种形式)中删除“删除按钮”。因为如果所有的表单都被删除了,就没有什么可克隆的了

谢谢你的帮助

var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.show(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $("#formy").append(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$(".clone").on("click", clone);

$(".remove").on("click", remove);
var-cloneIndex=1;
var\u极限=5;
var cloned_nbr=$(“.clonedInput”).length-1//排除默认(第一个)div
函数克隆()
{
如果(1){
$(this.parents(“.clonedInput”).remove();
克隆丁腈橡胶--;
}
}
$(“.clone”)。单击(“单击”,克隆);
$(“.remove”)。单击(“单击”,删除);

添加一个功能,用于检查存在的可移动
div的数量。如果大于1,则显示“删除”按钮,否则不要:

function handleRemoveButton(){
    var numItems = $('.clonedInput').length;
    if(numItems<=1){
        $(".remove").hide();
    }
    else{
        $(".remove").show();
    }
}
函数handleRemoveButton(){
var numItems=$('.clonedInput').length;

如果(numItems我对它做了一点修改。它应该可以使用适当的索引并删除按钮

function getFreeIds() {
    var used = $('.clonedInput').find('.label-nbr').map(function(i, v) {
            return parseInt(v.innerText)
        }).get();
    return allowed.filter(function (i) {return used.indexOf(i) === -1});
}
它能满足你的需要


编写一个重排函数来更新内容,并在克隆或删除项目时从中调用该函数

function rearrange(){
    var count = 1;
    var totalCount = $(".clonedInput").length;
    $(".clonedInput").each(function(){
        $(this).attr("id", "clonedInput"+count).find(".label-nbr").text(count).end().
        find(".category").attr("id","category"+count).end().find(".remove").toggle(totalCount!=1).attr("id","remove"+count).on("click", remove);
        count++;
    });
}

检查JSFIDLE地址:

老实说,不知道如何添加到我之前存在的代码中。只是尝试了一下,但运气不好。你能重新发布我的JS FIDLE并修改你的更改吗?:)谢谢!!:(有没有办法让我在第一个按钮上同时隐藏实际的按钮?)哈哈,没有问题…我想你已经编辑了4-5次了!!弄糊涂了,干杯好了,如果你在删除的末尾加上一个重新编号的函数会更好吗?.1,2,3,4在删除的1上加上2,3,4,1现在…排序会很好…不过解决方案不错(y)我们不能为他做任何事哈哈,他还需要学习:)我完全同意你为我做任何事!:D如果你愿意,我会把它变成另一个问题。XD欢迎!这对你很有帮助。