如何根据选择框显示输入和删除输入？

<select id="showInput">
  <option value="show">显示输入框</option>
  <option value="hide">隐藏输入框</option>
</select>

<input type="text" id="inputField" style="display: none;">
<button onclick="deleteInput()">删除输入</button>

document.getElementById("showInput").addEventListener("change", function() {
  var showInput = document.getElementById("showInput").value;
  var inputField = document.getElementById("inputField");

  if (showInput === "show") {
    inputField.style.display = "block";
  } else {
    inputField.style.display = "none";
  }
});

function deleteInput() {
  document.getElementById("inputField").value = "";
}