CODEWITHSUNDEEP
javascriptlocal-storage
deepak randhawa
deepak randhawa

Reputation: 111

How could i delete the list from todo app which i want to delete?

I have created a todo list app, it runs prefectly, but there's only one issue, like i created two list and I want to remove the second list, when I click on the remove button of second list it removes me the first list not the second list.

Here is my code, could someone please help me, Thanks in advance.

script.js

function getAndUpdate() {
  console.log("Updating List...");
  tit = document.getElementById('title').value;

  if (localStorage.getItem('itemsJson') == null) {
    itemJsonArray = [];
    itemJsonArray.push([tit]);
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))


  }
  else {
    itemJsonArrayStr = localStorage.getItem('itemsJson')
    itemJsonArray = JSON.parse(itemJsonArrayStr);
    itemJsonArray.push([tit]);
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
  }
  update();


}

function update() {
  if (localStorage.getItem('itemsJson') == null) {
    itemJsonArray = [];
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
  }
  else {
    itemJsonArrayStr = localStorage.getItem('itemsJson')
    itemJsonArray = JSON.parse(itemJsonArrayStr);
  }



  // Populate the table
  let tableBody = document.getElementById("tableBody");
  let str = "";
  itemJsonArray.forEach((element, index) => {
    str += `
      <tr>
      <th scope="row">${index + 1}</th>
      <td class ="ele">${element[0]}</td> 

      <td class="table-buttons" id="spaning-buttons">   
      <button class="btn btn-sm btn-primary open-modal" id = "open" value="click" onclick = "ShowPopUp()">
      <i class="fa fa-book" aria-hidden="true"></i></button><span>Open</span></td>
      
      <td class="table-buttons" id="margin-padding"><button class="btn btn-sm btn-primary delete-btn" onclick="removeItem()"><i class="fa fa-trash" aria-hidden="true"></i></button><span>Delete</span></td>
      </tr>`;

  });
  tableBody.innerHTML = str;

}

add = document.getElementById("add");
add.addEventListener("click", getAndUpdate);
update();

function removeItem(itemIndex) {
  if (confirm("Do you want to delete?")) {
    console.log("Delete", itemIndex);
    itemJsonArrayStr = localStorage.getItem('itemsJson')
    itemJsonArray = JSON.parse(itemJsonArrayStr);
    // Delete itemIndex element from the array
    itemJsonArray.splice(itemIndex, 1);
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray));

    // RemoveLsItem();
    update();
  }
}

Upvotes: 0

Views: 325

Answers (2)

Divyanshi Mishra
Divyanshi Mishra

Reputation: 110

var i = 1;

function ADDdata () {
        var text = $('#txtName').val();
        $('#list').append('<ol class="Editdata"></br><span>'+ text + ' </span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" id="edit' + i + '" value="Edit">&nbsp;&nbsp;&nbsp;&nbsp;' + '<input type="submit" class="done" id="delete' + i + '" value="Delete"></ol>');
  
$('#edit' + i).click(function(){
    $(this).prev().attr('contenteditable','true');
    $(this).prev().focus();
});

$('#delete' + i).click(function(){
    $(this).parent().remove();
});

  i++;
};

$(function() {
    $('#add').on('click', ADDdata);
});
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Todo List</h1>  
    <input type="text" id="txtName" placeholder="Enter Name">
    <input type="submit" id="add" value="Add">
    <p>
        <ul id="list">
        </ul>
    </p>

Upvotes: 1

Joseph
Joseph

Reputation: 6259

All the problem is that you forgot to pass the element index to the removeItem method

  <td class="table-buttons" id="margin-padding"><button class="btn btn-sm btn-primary delete-btn" onclick="removeItem(${index})"><i class="fa fa-trash" aria-hidden="true"></i></button><span>Delete</span></td>

Upvotes: 1

Related Questions