删除后Javascript更新循环值

Question

首先，my JSFiddle

我动态创建了单击这些内容时应该删除的内容。我使用变量 emma 为每个被单击的 div 创建一个单击函数。

每次点击 content div 时，content 的数量就会减少。因此，我希望我的 emma 计数相应地减少到它在 DOM 中的位置。

因此，如果我点击 Content 1，其循环中的 emma 值为 1，Content 1删除，其位置为 Content 2。我希望 Content 2 取代它的位置，并且 emma 值为 1。相反，如果我在删除 Content 1 后单击 Content 2，则 Content 2 上 emma 的值为仍然是2。

我最终使用 emma 变量来实现 CRUD 功能。

在我的每个内容被删除后，我该如何调整以保持我的emma值更新？

function digiteditcall(){
    for (emma = 0; emma < mar; emma++){
        (function(emma){
            document.addEventListener('click', function(e){
                let tenille = "content"+emma;
                if ( (e.target && e.target.id == tenille) || (e.target && e.target.parentNode.id == tenille) ){
                    maincontainer.removeChild(document.getElementById(tenille));
                    mar--;
                    console.log(emma);
                }
            });
        })(emma);
    }
}

再说一次，这里是my JSFiddle

Answer 1

我不确定，但看起来你可能把事情复杂化了。

看看这个，看看它是否符合您的预期。

编辑:我将 Emma 值作为自定义数据属性添加到元素中。因此，您可以在 DOM 上以 data-emma="X" 形式查看它，或者通过 JavaScript 通过 el.dataset.emma

查看它

(function cobrakai() {
  let bar = '';
  for (i = 0; i < 5; i++) {
    bar += "<p id='content" + i + "' class='content' data-emma='" + i + "'>Content " + i + "</p>";
  }
  maincontainer.innerHTML += bar;
})();

maincontainer.addEventListener('click', reDo);

function reDo(e) {
  if (e.target.nodeName !== 'P') return;
  e.preventDefault();
  e.stopPropagation();
  var nextElIndex = false;
  document.querySelectorAll('#maincontainer p').forEach((el, i) => {
    if(e.target.id == el.id) {
    	el.remove();
      nextElIndex = i;      
    }else if(nextElIndex !== false){
       el.id = 'content'+ nextElIndex;
       el.textContent = 'Content '+ nextElIndex;
       el.dataset.emma = nextElIndex;
       nextElIndex++;
    }
  });
}

<div id="maincontainer"></div>