sessionStorage return null

Question

Im trying to achieve this piece of code but in my console it says thing is null which is weird because when I look in the console, sessionStorage isn't empty...

$(".btn-alert").click(function(){
        var identifierOfSpan = $(this > "span").text();
        for(var prop in sessionStorage){
            var thing = JSON.parse(sessionStorage.getItem(prop))
            if(thing.id == identifierOfSpan){
                sessionStorage.removeItem(prop);                    
            }
        }
        $(this).closest(".voyages").remove();
        if(sessionStorage.length == 0){
            alert("Message!");
            location.href="reservation.html"

        }
    });

the button is supposed to delete the div and the sessionStorage item which looks like this

Html :

  <div class="voyages">
<button class="btn btn-alert btn-md mr-2" tabindex="-1">delete the flight</button>
<span>ID : 4224762</span>
<div class="infos">
    <img src="img/angleterre.jpg" alt="maroc">
    <div>
        <ul>
            <li><h5>Angleterre, Londres (LON)</h5></li>
            <li><h5>2 adulte(s)</h5></li>
            <li><h5> Aucun enfants </h5></li>
            <li><h5>Type : Couple</h5></li>
        </ul>
    </div>
</div>
<hr>
<h3>Options</h3>
<ul>
    <li>voiture : 0</li>
    <li>Hotel : 0 </li>
</ul>
<hr>
<h3>Prix :3713$</h3>

Answer 1

If I'm reading your question correctly, you want to...

1. Click on a button
2. Find the first sibling <span> element and parse a number out of its text content
3. Remove all sessionStorage items (JSON serialized objects) with matching id properties

For the ID, I highly recommend adding some data directly to the <button> to help you identify the right record. If you can, try something like

<button class="btn btn-alert btn-md mr-2" data-voyage="4224762"...

Try something like this

$('.btn-alert').on('click', function() {
  const btn = $(this)
  const id = btn.data('voyage')
  // or, if you cannot add the "data-voyage" attribute
  const id = btn.next('span').text().match(/\d+$/)[0]

  // for index-based removal, start at the end and work backwards
  for (let i = sessionStorage.length -1; i >= 0; i--) {
    let key = sessionStorage.key(i)
    let thing = JSON.parse(sessionStorage.getItem(key))
    if (thing.id == id) {
      sessionStorage.removeItem(key)
    }
  }

  // and the rest of your code
  btn.closest(".voyages").remove();
  if(sessionStorage.length === 0) {
    alert("Message!");
    location.href = 'reservation.html'
  }
})

---

The problem with using a for..in loop on sessionStorage is that you not only get any item keys added but also

• length
• key
• getItem
• setItem
• removeItem
• clear