Unable to delete item from array of objects

JavaScript
1

Hi,

The following code is a simple site bookmarker app that deals with localStorage, in the deleteBookmark() function, which is fired when you click a button via onclick property, the function is executed but the removing of item using splice is not happening I tried pop() nothing seemed to take effect on the bookmarks array, can someone help me understand why.

Regards

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/">

    <title>Site Bookmarker</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

</head>

<body >

    <div class="container">
        <div class="header clearfix">
            <h3 class="text-muted">Bookmarker</h3>
        </div>

        <div  class="jumbotron">
            <h1>Bookmark your favorit site</h1>
            <form action="" id="myForm">
                <div class="form-group">
                    <label for="">Site name</label>
                    <input type="text" id="siteName" class="form-control" placeholder="Website Name">
                </div>
                <div class="form-group">
                    <label for="">Site URL</label>
                    <input type="text" id="siteURL" class="form-control" placeholder="Website URL">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div class="row marketing">
            <div class="col-lg-12">
              <div id="result"></div>
            </div>
         
        </div>

        <footer class="footer">
            <p>&copy; Bookmarker, Inc.</p>
        </footer>

    </div> <!-- /container -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script language="javascript" src="js/main.js"></script>
</body>

</html>

var form = document.querySelector('#myForm')




form.addEventListener('submit', addBookmark)
window.onload = displayBookmark();

function addBookmark(event){
    event.preventDefault()
    var siteName = document.getElementById('siteName').value;
    var siteURL = document.getElementById('siteURL').value;
    var bookmark = {
        name: siteName,
        url: siteURL
    }

    if(localStorage.getItem('bookmarks')===null){
        var bookmarks = [];
        bookmarks.push(bookmark);
        localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
    } else {
        var bookmarks = []
        bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
        bookmarks.push(bookmark)
        localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
    }

    

    
}

function displayBookmark() {
    var bookmarkResult = document.getElementById('result');
    var ul = document.createElement('ul')
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
    bookmarkResult.innerHTML = '';
    for(let i=0;i<bookmarks.length;i++){
        bookmarkResult.innerHTML += `<div class="card card-body bg-light  m-4"> 
        <h3>${bookmarks[i].name} 
        <a class="btn btn-default " href="https://${bookmarks[i].url}" target="_blank">Visit</a>
        <a onclick="deleteBookmark(${i});" class="btn btn-danger text-light " >Delete</a>
        </h3>                            
        </div>`;
        
    }
    
}

//Why splice on bookmarks is not working
function deleteBookmark(i){
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
    console.log(i)
    bookmarks.splice(i, 1)
    console.log(bookmarks)
    

    
}
2

Are you even calling this anywhere? If so does it log? If it does, then it’s most likely logic error in the way you are deleting the bookmarks.

3

I checked your code and splicing works fine. What exactly doesn’t work?

https://codepen.io/jenovs/pen/vPvovv?editors=0010

4

in my code the console shows that arrays retain its items after the deletion I don’t know what is happening is this a bug induced by my browser? I am using chrome with the latest update.

5

Screenshot of the console?

6

I just had a look and and it is working. I added BBC as a fav then deleted it!

7

Untitled
Untitled1366×768 158 KB

This screenshot is taken after I pressed all of the three delete button sequentially, as you can see the value of “i” is logged properly (at main.js:54) but the array items and size are intact.
thank you very much for your time.

8

Every time you execute delete, the value is read from localStorage, spliced, but you don’t write it back to the localStorage, so the value in localStorage stays unchanged.

Check the codepen I posted earlier - it has correct code.