Javascript update for loop value after delete

Question

I have dynamically created content that is supposed to delete when they are clicked. I am using the variable emma to create a click function for each div that is clicked.

Every time I click on a content div, the amount of contents is reduced. As such, I want my emma count to reduce corresponding to its place in the DOM.

So if I click on Content 1, whose emma value in the loop is 1, Content 1 deletes, and in its place is Content 2. I want Content 2 to take its place and have an emma value of 1. Instead, if I click on Content 2 after deleting Content 1, then the value of emma on Content 2 is still 2.

I am ultimately using the emma variable for CRUD features.

How might I adjust to keep my emma value updated after each of my content is deleted?

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);
    }
}

Again, here is my JSFiddle

Is there any reason you don't want to use any library? using jQuery you can do that in very few lines. — izengod
– izengod, Commented Feb 19, 2018 at 4:35
Define the emma variable with let and you don't need the closure. This is an archaic pattern - let was added to the spec so you don't have to do this anymore.... that said, I really don't know what you mean by "keep the emma variable updated"... — I wrestled a bear once.
– I wrestled a bear once., Commented Feb 19, 2018 at 4:42
Instead of the links to fiddles you can put it directly in using the edit button (CTRL-M) — Mark Schultheiss
– Mark Schultheiss, Commented Feb 19, 2018 at 4:54

Randy Casburn · Accepted Answer · 2018-02-19 05:17:13Z

1

I'm not sure, but it looks like you might be over complicating things.

Take a look at this and see if it does what you are expecting.

EDIT: I added the Emma value as a custom data attribute to the element. So you can see it on the DOM as data-emma="X" or with JavaScript via 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>

edited Feb 19, 2018 at 5:17

answered Feb 19, 2018 at 5:06

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Chen Over a year ago

this was the right idea. for each instead of a bunch of for loops.

Randy Casburn Over a year ago

Awesome. glad to help!

izengod · Accepted Answer · 2018-02-19 04:52:05Z

1

If you can use jQuery(which is less headache), try this:

 $document.ready(function(){
 $("#maincontainer").click(function(){
 $("#maincontainer").hide();
 })
})

otherwise use ES6 let keyword for your emma which provides block-level scope.

answered Feb 19, 2018 at 4:52

izengod

1,1565 gold badges17 silver badges44 bronze badges

1 Comment

Jason Chen Over a year ago

yes. i decided to make an app using just vanilla javascript. never again.

Collectives™ on Stack Overflow

Javascript update for loop value after delete

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related