Why these elements do not remove based on index after I click button

Question

_{your text}I try to make todo app but when I click delete button it should delete element based on index but it does not delete the first element if I post once, but if I post multiple time then it deletes couple elements and how can I fix this?

variable for the script

this is when you add elements in todos

and this is for deleting elements after click delbtn

Answer 1

I would change the calls a little like this:

<input class="url" />
<button onclick="addItem()">post</button>
<div class="content"></div>

<script>
  let todos = [];

  const input_value = document.querySelector(".url");

  const postBtn = document.querySelector(".post-btn");

  const content = document.querySelector(".content");


  function addItem() {
    let post = input_value.value;

    todos.push(post);

    renderTodos();
  };

  function renderTodos() {
    content.innerHTML = "";

    todos.map((todo, index) => {
      let html = `<div class="el">
        <p>${todo}</p>

        <button class="del-btn" onclick=deletion('${index}')>DELETE</button>
        </div>
      `;

      content.insertAdjacentHTML("afterbegin", html);
    });
  }

  function deletion(key) {
    delete todos[key];

    renderTodos();
  }
</script>

You were having problems with rendering after deletion. Your content.innerHTML = ""; in there was "replacing" the previous todos.