Question 52138 in Javascript Question posted in
A very good W3school tutorial can be found here.

Remove all the options from a multiple selectbox – Javascript

If I try to remove all the options with the following code from a multiple select box, not all options will be removed.

What do I wrong?

var e = document.getElementById("category2").options;

for (var i = 0; i < e.length; i++) {
  e[i].remove();
}
<select id="category2" name="category_id[]" multiple="multiple" size="10">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
Tags:

4

Answers


  1. 0

    The issue is that every time you run .remove(), e.length gets decremented by one, but i stays just as high, so eventually it will be less than i.

    To fix this, just create a copy of e.length (so it doesn’t change) and remove e[0] each time. If you keep removing e[i], then i will be larger than e.length and the element won’t exist:

    let e = document.getElementById("category2").options;

const temp = e.length;
for (let i = 0; i < temp; i++) {
  e[0].remove();
}
    <select id="category2" name="category_id[]" multiple="multiple" size="10">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
    Login or Signup to reply.
  2. 0

    Maybe a little faster and simpler:

    document.getElementById("category2").options.length = 0;
    <select id="category2" name="category_id[]" multiple="multiple" size="10">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
    Login or Signup to reply.
  3. 0

    looking for this ?

    bt_remove.onclick =_=>
  {
  [...category2.selectedOptions].forEach(opt => opt.remove() );
  
  /*
   for just unselect:
  [...category2.selectedOptions].forEach(opt => opt.selected = false );
  */
  }
    <select id="category2" multiple="multiple" size="5">
  <option value="1"          >--- 1 ---</option>
  <option value="2" selected >--- 2 ---</option>
  <option value="3"          >--- 3 ---</option>
  <option value="4" selected >--- 4 ---</option>
  <option value="5" selected >--- 5 ---</option>
</select>
<br><br>
<button id="bt_remove"> remove selects</button>
    Login or Signup to reply.
  4. 0

    in your question you have 1 selectbox and your answer is this:

    document.querySelectorAll('#category2 option').forEach(opt=>{
    opt.remove();
});

    if you have multiple selectbox, you can use this

    document.querySelectorAll('#category1 option, #category2 option').forEach(opt=>{
    opt.remove();
});

    or use function

    function removeOpt( selector ){
    document.querySelectorAll(selector+' option').forEach(opt=>{
        opt.remove();
    });
}
removeOpt( '#category2' );
removeOpt( '#otherSelectTag' );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search