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>
2 answers
solution1
1 2016-06-01 07:41:23
-
remove()theoptionusingindex -
.spliceexpectsfirst argumentasindexof the item to be removed and second argument isnumber of elementsto 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>
solution2
0 2016-06-01 07:45:22
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.