CODEWITHSUNDEEP
javascripthtmldrop-down-menu
vedant199991
vedant199991

Reputation: 45

Allow user to delete an option element in html

What I am trying to achieve is a dropdown menu whose options the user will create by inputting the text content of the option they want to create. I have achieved this but what I want is that the user can delete an option if. I cant figure out how to do this. Help please. Buttons, input fields, anything is fine, but please use vanilla Javascript.

<!DOCTYPE html>
<html>
  <div id="name">
    <select id="sel"></select>
    <input type="text" class="auto-save" id="inputname">
    <button id="button" onclick="newnamefunc();document.getElementById('inputname').value='';">
      Create Option
    </button>
  </div>
    
  <script>  
  function newnamefunc() {
    const inputval = document.getElementById('inputname').value;
    const createname = document.createElement("option");
    createname.setAttribute("class", "option")    
    const namevalue = document.createTextNode(inputval);
    createname.appendChild(namevalue);

    const element = document.getElementById("sel");
    element.appendChild(createname);    
  }
</script>
</html>

Upvotes: 1

Views: 419

Answers (6)

Ilyas
Ilyas

Reputation: 94

Create new button in html

<button id="button" onclick="remove(document.getElementById('inputname').value);document.getElementById('inputname').value='';">
      Delete Option
</button>

And add js function

function remove(val) {
    var selectobject = document.getElementById("sel");
    for (var i=0; i<selectobject.length; i++) {    
        if (selectobject.options[i].value == val)
            selectobject.remove(i);
    }
}

Upvotes: 0

Arvind Jat
Arvind Jat

Reputation: 1

use this:

function RemoveOption(){ 
    var Element = document.getElementById("sel");  
    Element.remove(Element.selectedIndex);  
}

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution

function newnamefunc() {
    const inputval = document.getElementById('inputname').value;
    const createname = document.createElement("option");
    createname.setAttribute("class", "option")    
    const namevalue = document.createTextNode(inputval);
    createname.appendChild(namevalue);

    const element = document.getElementById("sel");
    element.appendChild(createname);    
  }
  
function deleteOption() {
  const element = document.getElementById("sel");
  element.remove(element.selectedIndex);
}
<div id="name">
  <select id="sel"></select>
  <input type="text" class="auto-save" id="inputname">
  <button id="button" onclick="newnamefunc();document.getElementById('inputname').value='';">
    Create Option
  </button>
  
  <button id="button" onclick="deleteOption();">
    Delete Option
  </button>
</div>

Documentation: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_remove

Upvotes: 0

mplungjan
mplungjan

Reputation: 178285

Here is a complete solution which I rewrote to use eventListeners

document.getElementById("name").addEventListener("click",function(e) {
  const tgt = e.target;
  const src = document.getElementById('inputname');
  const sel = document.getElementById("sel");
  const inputval = src.value;  
  src.value="";  
  if (tgt.id==="add") {
    if (sel.querySelector("option[value="+inputval+"]")) {
      alert("That already exists")
    }  
    else {
      sel.options[sel.options.length] = new Option(inputval,inputval)
      sel.value  = inputval; // focus the new value
    }  
  }
  else if (tgt.id==="del") {
    if (sel.selectedIndex === 0) return;
    if (inputval) sel.value = inputval; // if filled in, we use it
    const curOpt = sel.options[sel.selectedIndex]; // in any case remove the selected option
    if (curOpt) {
      curOpt.remove();
      sel.selectedIndex = -1;
    }  
  }
})
<div id="name">
  <select id="sel"><option value="">Please select</option></select>
  <input type="text" class="auto-save" id="inputname">
  <button type="button" id="add">Create Option</button>
  <button type="button" id="del">Remove Option</button>
</div>

Upvotes: 0

Teemu
Teemu

Reputation: 23406

select element has options collection. The collection has remove method. You can use it like so;

const select = document.querySelector('select'),
    options = select.options;
options.remove(select.selectedIndex);

Upvotes: 0

Harshana
Harshana

Reputation: 5476

This is one of the procedures you can follow:

  1. Create a function called deleteOption
  2. Inside function, loop through the selectBoxElem variable and find the selected option. Then Remove the element
  3. Attach the function to a button.

Example:

function newnamefunc() {
  const inputval = document.getElementById('inputname').value;
  const createname = document.createElement("option");
  createname.setAttribute("class", "option")
  const namevalue = document.createTextNode(inputval);
  createname.appendChild(namevalue);

  const element = document.getElementById("sel");
  element.appendChild(createname);
}

function deleteOption() {
  const selectBoxElem = document.getElementById("sel");
  for (var i = 0; i < selectBoxElem.length; i++) {
    if (selectBoxElem.options[i].value == selectBoxElem.value)
      selectBoxElem.remove(i);
  }
}
<!DOCTYPE html>
<html>
<div id="name">
  <select id="sel"></select>
  <input type="text" class="auto-save" id="inputname">
  <button id="button" onclick="newnamefunc();document.getElementById('inputname').value='';">
      Create Option
    </button>
  <button id="button" onclick="deleteOption()">
      Delete Selected Option
    </button>
</div>

</html>

Upvotes: 1

Related Questions