javascript - 删除后用Java语言更新循环值

首先，my JSFiddle

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

每次单击content div时，content的数量都会减少。因此，我希望我的emma数量减少，使其与在DOM中的位置相对应。

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

我最终将emma变量用于CRUD功能。

删除每个emma后如何调整以保持我的content值更新？

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

最佳答案

我不确定，但是看来您可能已经使事情复杂化了。

看一看，看看它是否符合您的期望。

编辑：我添加了Emma值作为元素的自定义数据属性。因此，您可以在DOM上以data-emma="X"或通过el.dataset.emma的JavaScript对其进行查看

(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>

关于javascript - 删除后用Java语言更新循环值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48859557/