javascript - 使用 jquery 创建新 DOM 时无法读取 if 语句

我用jquery创建了一个克隆函数，并在其中包含了一个删除按钮，当我单击删除按钮时，它将删除特定的父框，并在删除按钮长度< 2时隐藏删除按钮，我为每个按钮生成唯一的ID框从1开始，当我按顺序删除id从3,2,1和4开始的框(从下到上框)时，它起作用，但是当我开始删除从4,1开始时，删除按钮无法隐藏,2,3(从上到下)，这是我的代码

$(document).ready(function(){
  var counter = 1;
  var total = 1;
  var el = $('#clone');
  var box = $('.box');
  var container = '.container';
  var deleteBtn = $('#delete');
  
   

  $(document.body).on('click','#clone', function(){
    counter ++;
    total ++;
    var startClone = box.clone(true);
    startClone.appendTo(container);
    box.attr('id','hallo' + counter); 
    $('.box').find('#delete').show();
    deleteBtn.show();
  })
  
  $('#delete').on('click', function(){
    total --;
    $(this).closest('.box').remove();
    console.log(total);
    if(total < 2){
      deleteBtn.hide();
    }else {
      deleteBtn.show();
    } 
  })
})

.box {
      background: red;
      width: 100px;
      height: 100px;
      margin: 5px 0;
    }
    #clone {
      display: block;
    }
    #delete {
      display: none;
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <div class="container">
    <div class="box" id="hallo1">
      <button id="delete">Delete</button>
    </div>
  </div>
  <button id='clone'>Clone this</button>
</body>
</html>

最佳答案

id 应该是唯一的。当您关闭 box 元素时，将会有多个带有 id 删除的按钮，并且会产生问题。

我使用了类.delete。请检查。

$(document).ready(function() {
  var counter = 1;
  var el = $('#clone');
  var box = $('#hallo1');
  var container = '.container';
  box.hide(); //Hide the orginal box

  var clone = function(){
    counter++;
    var startClone = box.clone(true);
    startClone.append(counter - 1); //For test purposes. Please remove
    startClone.appendTo(container);
    startClone.attr('id', 'hallo' + counter);
    startClone.show(); //Show the cloned box
    startClone.find('.delete').show();
    toggleDelete();
  }

  var toggleDelete = function(){
    if ($(".delete").length < 2) {
      $(".delete").hide();
    } else {
      $(".delete").show();
    }
  }

  clone();//Clone initaly

  $(document.body).on('click', '#clone', function() {
    clone();
  })

  $('.delete').on('click', function() {
    $(this).closest('.box').remove();
    toggleDelete();
  })
})

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 5px 0;
}

#clone {
  display: block;
}

.delete {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="box" id="hallo1">
    <button class="delete">Delete</button>
  </div>
</div>
<button id='clone'>Clone this</button>

<小时/>

替代清洁剂方法:

$(document).ready(function() {
  $("#clone").click(function() {
    clone();
    toggleDelete();
  });

  $("body").on('click', '.delete', function() {
    $(this).closest('.box').remove();
    toggleDelete();
  })
  
  var toggleDelete = function() {
    if ($(".delete").length < 2) {
      $(".delete").hide();
    } else {
      $(".delete").show();
    }
  }

  var clone = function() {
    $("#container").append('<div class="container"><div class="box"><button class="delete">Delete</button></div></div>');
  }

   clone(); //Call init
});

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 5px 0;
}

#clone {
  display: block;
}

.delete {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<button id='clone'>Clone this</button>

关于javascript - 使用 jquery 创建新 DOM 时无法读取 if 语句，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48819217/

javascript - 使用 jquery 创建新 DOM 时无法读取 if 语句

上一篇：javascript - 创建数字数组后，Math.Max 在数组上返回 Nan

下一篇：javascript - 当 div 内的范围包含使用 jquery 的特定文本时更改 div 的背景