从数据列表中添加/删除项目两次或更多的问题

Question

大家晚上好， 所以，我试图让用户添加成分列表。有文本输入，他可以输入成分名称或从建议列表中选择（我使用 datalist 输入）。当他单击添加按钮时，该项目被添加到列表中并从建议列表（数据列表）中删除。当他从列表中删除一个项目时，它会从成分列表中删除并返回到建议列表。 它通常看起来像这样： add ingredients 该代码运行良好，但只是第一次。当用户从成分列表中删除该项目然后稍后选择要再次添加的项目时，它不会从建议列表中删除..我认为这是“返回”功能中的问题..

这里是代码 sn-ps（尝试在配料中添加任何物品，例如“塑料袋”，然后将其移除，然后再次添加）：

function removeItem(list) { //removes item from suggestions list
  var item = $('input#' + list).val();
  if ($('option[value="' + item + '"]'))
    $('option[value="' + item + '"]').remove();
}


function returnItem(e) { //returns item to suggestions list
  var optionVal = $(e).closest("td").next().children("label").html();
  var newOption = new Option(optionVal);
  $("#suggests").append(newOption);
}


function addIngredient(e) { //adds item to ingredient list
  var inputContent = document.getElementById("addIngreField").value;
  if (inputContent != "") {
    var table = document.getElementById("ingredients");
    var row = table.insertRow(table.rows.length - 1);
    var cell1 = row.insertCell(0);
    cell1.style.textAlign = "left";
    cell1.innerHTML = "<input class='removeIngre' type='button' value='-' onclick='returnItem(this) ; removeIngredient(this)'>";
    var cell2 = row.insertCell(1);
    cell2.innerHTML = "<label class='ingred'>" + inputContent + "</label>";
    document.getElementById("addIngreField").value = "";
  }
};


function removeIngredient(e) { //removes item from ingredients list
  var row = e.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

.ingred {
  display: block;
  position: relative;
  width: 200px;
  margin-bottom: 12px;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: black;
  font-family: "Muli-Reg";
}

.addIngre {
  cursor: pointer;
  outline: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: none;
  background-color: green;
  line-height: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: "Muli-Reg";
}

.removeIngre {
  cursor: pointer;
  outline: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: none;
  background-color: #cc0000;
  line-height: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: "Muli-Reg";
}

.addSte {
  cursor: pointer;
  outline: none;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: none;
  background-color: green;
  color: white;
  font-size: 18px;
  font-weight: bold
}

.removeSte {
  cursor: pointer;
  outline: none;
  opacity: 0.5;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: none;
  background-color: #cc0000;
  color: white;
  font-size: 18px;
  font-weight: bold
}

.removeIngre:hover {
  opacity: 1;
}

.removeSte:hover {
  opacity: 1;
}

#add {
  cursor: pointer;
}

#stepsTable {
  counter-reset: row-num;
}

#stepsTable tr {
  counter-increment: row-num;
}

#stepsTable tr td:nth-child(2)::before {
  content: counter(row-num);
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}


/* FF 4-18 */

input:focus::-moz-placeholder {
  color: transparent;
}


/* FF 19+ */

input:focus:-ms-input-placeholder {
  color: transparent;
}


/* IE 10+ */

textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

textarea:focus:-moz-placeholder {
  color: transparent;
}


/* FF 4-18 */

textarea:focus::-moz-placeholder {
  color: transparent;
}


/* FF 19+ */

textarea:focus:-ms-input-placeholder {
  color: transparent;
}


/* IE 10+ */

<link rel="stylesheet" type="text/css" href="CSS/Navigation-visitor.css">
<link rel="stylesheet" type="text/css" href="CSS/addArtwork.css">
<link rel="stylesheet" type="text/css" href="CSS/footer.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="JS/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="JS/menuBar.js"></script>

<table id="ingredients" style="text-align: left; margin: auto; width:400px; font-family: " Muli-Reg ";">

  <tr>
    <td colspan="2">
      <p class="fieldTitle" style="color: gray; font-size: 22px;">Ingredients</p>
    </td>
  </tr>

  <tr id="addI">
    <td style="text-align: left; width: 50px;">
      <input class="addIngre" type="button" value="+" onclick="removeItem('addIngreField'); addIngredient()">
    </td>
    <td>
      <input id="addIngreField" type="text" maxlength="300" style="border: solid black; padding-left: 10px; padding-right: 10px; outline: none;  border-radius: 20px; font-size: 15px; height: 30px; width: 95%; text-align:left" list="suggests">

      <datalist id="suggests">
                <option value="Plastic Bags">
                <option value="colored paper">
                <option value="wood frames">
                <option value="Used Fabrics">
                <option value="Terapak Cartons">
                <option value="Hair ties">
                <option value="Newspaper">
                <option value="Cardboards">
                <option value="Pizza Box">
                <option value="Aluminum Foil">
                <option value="Cloth Hangers">
                <option value="CD's">
                <option value="Leather">
              </datalist>
    </td>
  </tr>


  <tr>
    <td colspan="2" style="text-align: right; height: 50px;">
      <button style="border: none; border-radius: 10px; height: 40px; width: 80px; color: dimgrey; font-size: 22px; background-color: darkgrey; " class="fieldTitle">next</button>
    </td>
  </tr>
  
</table>

Answer 1

再次创建选项时需要添加 value 属性。 new Option(optionVal, optionVal)

function removeItem(list) { //removes item from suggestions list
  var item = $('input#' + list).val();
  if ($('option[value="' + item + '"]'))
    $('option[value="' + item + '"]').remove();
}


function returnItem(e) { //returns item to suggestions list
  var optionVal = $(e).closest("td").next().children("label").html();
  var newOption = new Option(optionVal, optionVal);
  $("#suggests").append(newOption);
}


function addIngredient(e) { //adds item to ingredient list
  var inputContent = document.getElementById("addIngreField").value;
  if (inputContent != "") {
    var table = document.getElementById("ingredients");
    var row = table.insertRow(table.rows.length - 1);
    var cell1 = row.insertCell(0);
    cell1.style.textAlign = "left";
    cell1.innerHTML = "<input class='removeIngre' type='button' value='-' onclick='returnItem(this) ; removeIngredient(this)'>";
    var cell2 = row.insertCell(1);
    cell2.innerHTML = "<label class='ingred'>" + inputContent + "</label>";
    document.getElementById("addIngreField").value = "";
  }
};


function removeIngredient(e) { //removes item from ingredients list
  var row = e.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

.ingred {
  display: block;
  position: relative;
  width: 200px;
  margin-bottom: 12px;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: black;
  font-family: "Muli-Reg";
}

.addIngre {
  cursor: pointer;
  outline: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: none;
  background-color: green;
  line-height: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: "Muli-Reg";
}

.removeIngre {
  cursor: pointer;
  outline: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: none;
  background-color: #cc0000;
  line-height: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: "Muli-Reg";
}

.addSte {
  cursor: pointer;
  outline: none;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: none;
  background-color: green;
  color: white;
  font-size: 18px;
  font-weight: bold
}

.removeSte {
  cursor: pointer;
  outline: none;
  opacity: 0.5;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: none;
  background-color: #cc0000;
  color: white;
  font-size: 18px;
  font-weight: bold
}

.removeIngre:hover {
  opacity: 1;
}

.removeSte:hover {
  opacity: 1;
}

#add {
  cursor: pointer;
}

#stepsTable {
  counter-reset: row-num;
}

#stepsTable tr {
  counter-increment: row-num;
}

#stepsTable tr td:nth-child(2)::before {
  content: counter(row-num);
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}


/* FF 4-18 */

input:focus::-moz-placeholder {
  color: transparent;
}


/* FF 19+ */

input:focus:-ms-input-placeholder {
  color: transparent;
}


/* IE 10+ */

textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

textarea:focus:-moz-placeholder {
  color: transparent;
}


/* FF 4-18 */

textarea:focus::-moz-placeholder {
  color: transparent;
}


/* FF 19+ */

textarea:focus:-ms-input-placeholder {
  color: transparent;
}


/* IE 10+ */

<link rel="stylesheet" type="text/css" href="CSS/Navigation-visitor.css">
<link rel="stylesheet" type="text/css" href="CSS/addArtwork.css">
<link rel="stylesheet" type="text/css" href="CSS/footer.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="JS/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="JS/menuBar.js"></script>

<table id="ingredients" style="text-align: left; margin: auto; width:400px; font-family: " Muli-Reg ";">

  <tr>
    <td colspan="2">
      <p class="fieldTitle" style="color: gray; font-size: 22px;">Ingredients</p>
    </td>
  </tr>

  <tr id="addI">
    <td style="text-align: left; width: 50px;">
      <input class="addIngre" type="button" value="+" onclick="removeItem('addIngreField'); addIngredient()">
    </td>
    <td>
      <input id="addIngreField" type="text" maxlength="300" style="border: solid black; padding-left: 10px; padding-right: 10px; outline: none;  border-radius: 20px; font-size: 15px; height: 30px; width: 95%; text-align:left" list="suggests">

      <datalist id="suggests">
                <option value="Plastic Bags">
                <option value="colored paper">
                <option value="wood frames">
                <option value="Used Fabrics">
                <option value="Terapak Cartons">
                <option value="Hair ties">
                <option value="Newspaper">
                <option value="Cardboards">
                <option value="Pizza Box">
                <option value="Aluminum Foil">
                <option value="Cloth Hangers">
                <option value="CD's">
                <option value="Leather">
              </datalist>
    </td>
  </tr>


  <tr>
    <td colspan="2" style="text-align: right; height: 50px;">
      <button style="border: none; border-radius: 10px; height: 40px; width: 80px; color: dimgrey; font-size: 22px; background-color: darkgrey; " class="fieldTitle">next</button>
    </td>
  </tr>
  
</table>