Using for loop for delete button

Question

Good evening guys. I am learning javascript. After learning some basics, I decided to make TODO LIST and got the todo list code from the internet. But I have a question on my mind. My code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div>
      <h2>ToDo</h2>
      <input type="text" id="inputum" />
      <button onclick="fonksiyonum()">Ekle</button>
    </div>

    <ul id="yeniUl"></ul>

    <script>
      function fonksiyonum() {
        var liEkle = document.createElement('li');
        var inputtaYazanlar = document.getElementById('inputum').value;
        var textim = document.createTextNode(inputtaYazanlar);

        liEkle.appendChild(textim);

        document.getElementById('yeniUl').appendChild(liEkle);
        document.getElementById('inputum').value = '';

        var button = document.createElement('BUTTON');
        var hiks = document.createTextNode('\u00D7');

        button.appendChild(hiks);
        liEkle.appendChild(button);

        button.className = 'close';
        var close = document.getElementsByClassName('close');

        for (i = 0; i < close.length; i++) {
          close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = 'none';
          };
        }
      }
    </script>
  </body>
</html>

As I understand it, for (i = 0; i < close.length; i++) is used to get the button.close[i].onclick = function () shows the function that will run when the button is pressed. But why close[i] what does the letter 'i' mean here? After that there is var div = this.parentElement. I don't understand this.parentElement. I would be happy if someone could explain the concept of parent element to me.

i is (usually) short for index, indicating the position in the loop as a number. close[i] is selecting an item from the close array based on the current index. — Emiel Zuurbier
– Emiel Zuurbier, Commented Oct 27, 2022 at 18:02

Nealium · Accepted Answer · 2022-10-27 18:14:38Z

1

close.length is actually List/Array of all the Buttons. You can tell by the Elements in getElementsByClassName.
So you are looping through all the Close Buttons and adding an onclick() method to each.

list = [btn0, btn1]
list.length // length = 2

// for i=0; i<list.length; i++

// 1st pass, i == 0:
list[0] // btn0

// 2st pass, i == 1:
list[1] // btn1

// 3rd pass, i == 2
// i is not less than length, 2, end.

For the parentElement I always look at the tabs, Just go 1 left tab over and up; that's the parent! That's why formatting is important, to make this easy!

<div>                                               <!-- <- Parent -->
  <h2>ToDo</h2>
  <input type="text" id="inputum" />
  <button onclick="fonksiyonum()">Ekle</button>     <!-- <- Button --->
</div>

answered Oct 27, 2022 at 18:14

Nealium

2,2781 gold badge9 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Using for loop for delete button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related