Remove JavaScript array item from HTML?

Question

I'm aware this has been asked before, but my code isn't working.

My assessment task is to populate something similar to a list box from a JavaScript array and then delete the value. I thought my code should work, but it won't.

Markup:

var sel = document.getElementById('cars');
var carArray = ["Audi", "BMW", "Porsche"]
for (var i = 0; i < carArray.length; i++) {
  var listBox = document.createElement('option');
  listBox.innerHTML = carArray[i];
  listBox.value = carArray[i];
  sel.appendChild(listBox);
}

function deleteFunc() {
  var selInd = document.getElementById("cars").selectedIndex;
  carArray.splice(selInd - 1, selInd + 1);
}

<form>
  <select id="cars" multiple>
    <option id="carBrand"></option>
  </select>
  <button onclick="deleteFunc()">Delete</button>
</form>

1. step: change the type of the button to actually be a button only by adding type="button", otherwise it will act as a submit button which will post the form and thus reload the page — Andreas
– Andreas, Commented Jun 1, 2016 at 7:40

Rayon · Accepted Answer · 2016-06-01 07:49:57Z

1

remove() the option using index
.splice expects first argument as index of the item to be removed and second argument is number of elements to be removed.

var sel = document.getElementById('cars');
var carArray = ["Audi", "BMW", "Porsche"]
for (var i = 0; i < carArray.length; i++) {
  var listBox = document.createElement('option');
  listBox.innerHTML = carArray[i];
  listBox.value = carArray[i];
  sel.appendChild(listBox);
}

function deleteFunc() {
  var selInd = document.getElementById("cars").selectedIndex;
  if (selInd > -1) {
    document.getElementById("cars").options[selInd].remove();
    carArray.splice(selInd, 1);
    console.log(carArray);
  }
  return false; //to prevent from submission
}

<form>
  <select id="cars" multiple>
  </select>
  <button onclick="return deleteFunc()">Delete</button>
</form>

edited Jun 1, 2016 at 7:49

answered Jun 1, 2016 at 7:41

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

2 Comments

Rayon Over a year ago

@Andreas, Updated..Thank you :)

Smithy Over a year ago

Thank you heaps! I ran the script and it ran. What does the console.log(carArray); do?

Alan Tan · Accepted Answer · 2016-06-01 07:45:22Z

You are using the splice method wrongly, the first value of splice should be the index of your selected item, and the second value is how many items you would like removed from your array.

The next problem is that you are not re-populating the list with the updated array values.

The final problem is you forgot to give your button a type of button to prevent the form being sent (page reload) when clicking the button.

here's how the code should look like.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

</head>
<body onLoad="populateList()">
    <form>
        <select id="cars" multiple>
            <option id="carBrand"></option>
        </select>
        <button type="button" onclick="deleteFunc()">Delete</button>
    </form>
    <script>
        var sel = document.getElementById('cars');
        var carArray= ["Audi", "BMW", "Porsche"]


        function populateList() {
            sel.innerHTML = "";
            for (var i = 0; i < carArray.length; i++) {
                var listBox = document.createElement('option');
                listBox.innerHTML = carArray[i];
                listBox.value = carArray[i];
                sel.appendChild(listBox);
            }
        }

        function deleteFunc() {
            var selInd = sel.selectedIndex;
            carArray.splice(selInd, 1);
            console.log(carArray);
            populateList();            
        }
    </script>
</body>
</html>

Read about the splice function here.

Collectives™ on Stack Overflow

Remove JavaScript array item from HTML?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related