Question

我已经写了一个基本脚本来复制一个名为imgcont的div 150次。

现在，它正确复制，但我想删除之前的div。示例序列：

＃imgcont1 loading
＃imgcont2加载，删除＃imgcont1
＃imgcont3加载，删除＃imgcont2
＃imgcont4加载，删除＃imgcont3

有意义吗？ Codepen示例：http://codepen.io/jeremypbeasley/pen/clHCK

var i = 0;
var xpos = 1;
var original = document.getElementById('imgcont');

function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
var randomcolor = colors[Math.floor(Math.random() * colors.length)];
clone.id = "imgcont" + ++i;
original.parentNode.appendChild(clone);
$(clone).css("background-color", randomcolor);
$(clone).css("left", xpos);
}
var p = 0;
var interval = setInterval(function() {
duplicate();
p += 1;
xpos += 3;
if (p == 150) clearInterval(interval);
}, 10);

Answer 1

下一步加载并删除上一个，意味着一个div可见，对吧？为什么不在没有克隆的情况下更改一个div的属性？

Answer 2

您可以使用以下逻辑：

var remID = +currentNode.id.slice(7) - 1;
$('#imgcont' + remID).remove();

Answer 3

您可以使用所有主流浏览器都支持的container_node.replaceChild(new_node,old_node)。

container = original.parentNode;
container.replaceChild(clone,original);

Answer 4

我想删除上一个元素，可以使用jQuery .eq() 方法：

function duplicate() {
    // ...
    // .eq(-2) is the the element to be cloned
    // .eq(-1) is the the cloned element
    $("[id^='imgcont']").eq(-2).remove();
}

但我会使用jQuery .replaceWith() 方法使用 jQuery

重构

  (function ($, undefined) {
    var colors = [ /* many colors */ ];

    var i = 0,
        p = 0,
        xpos = 1,
        interval = setInterval(function() {
          duplicate();
          //xpos += 3;
          if (++p == 150) clearInterval(interval);
        }, 10);

    function duplicate() {
      var randomcolor = colors[Math.floor(Math.random() * colors.length)],
          original = $("[id^='imgcont']"),
          clone = original.clone()
            .attr("id", "imgcont" + (++i))
            .css({"background-color": randomcolor /*, "left": xpos*/ });

      original.replaceWith(clone);
    }

  })(jQuery);

<小时/> 但是为什么要克隆一个元素以便以后删除呢？我只会修改该元素的属性。

  (function($, undefined) {
    var colors = [ /* many colors */ ];
    var n = 0,
        interval = setInterval(function() {
          var randcolor = colors[Math.floor(Math.random() * colors.length)],
              item = $("#imgcont");
          item.css({"background-color": randcolor });
          if (++n == 150) clearInterval(interval);
        }, 10);
  })(jQuery);

如何在使用.cloneNode后删除以前的DOM元素

4 个答案: