如何在点击时删除特定项目而不是列表中的最后一个项目

huangapple
go评论100阅读模式
英文:

How do I delete a specific item instead of the last item in my list using onclick

问题

I am creating a program that contains items for a shopping list and then the user can add items to the list. I want the user to able to delete items from the shopping list by simply clicking on the item. When I click on the item, the last item gets deleted no matter which item I click on. I just want to find out why only the last item in my array is getting deleted instead of the item that I am selecting.

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>购物清单</title>
  8.     <!-- 链接 Google 字体 -->
  9.     <link href="https://fonts.googleapis.com/css2?family=Nunito&amp;display=swap" rel="stylesheet">
  10.     <!-- 外部 CSS 链接 -->
  11.     <link rel="stylesheet" href="./css/styles.css">
  12. </head>
  14. <body>
  15.     <div class="container">
  16.         <h2>购物清单</h2>
  17.         <div class="header">
  18.             <input type="text" id="input" placeholder="物品">
  19.             <span onclick="updateList(myArray)" id="addBtn"><button>添加物品</button></span>
  20.         </div>
  21.         <span value="删除" class="close" onclick="deleteItem(myArray)">
  22.         <ul id="itemList">
  23.         </ul>
  24.         </span>
  25.     </div>
  26.     <script src="mainForTask2.js"></script>
  27. </body>
  29. </html>

JavaScript：

  1. // 这是一个 JavaScript 程序，将数组中的项目添加到无序列表中
  2. let myArray = ["糖", "牛奶", "面包", "苹果"];
  3. let list1 = document.querySelector("#itemList");
  5. // 此函数将数组项目添加到列表中
  6. arrayList = (arr) => {
  7.     let items = arr.forEach(item => {
  8.         let li = document.createElement('li');
  9.         li.textContent = item;
  10.         list1.appendChild(li);
  11.     });
  12. }
  14. arrayList(myArray);
  16. // 此函数更改两个列表项目的背景颜色，以显示它们已出售
  17. const idSelector = () => {
  18.     let idElement = document.getElementsByTagName("li");
  19.     idElement[0].style.color = "red";
  20.     idElement[3].style.color = "red";
  21.     console.log(idElement.value);
  22. }
  24. idSelector();
  26. // 此函数使用表单中的用户输入将项目添加到列表中
  27. updateList = (arr) => {
  28.     let blue = document.getElementById("input").value;
  30.     if (blue === "") {
  31.         alert("如果要添加物品，请输入值。");
  32.     } else {
  33.         arr.push(blue);
  34.         list1.innerHTML = '';
  35.         arrayList(myArray);
  36.         idSelector();
  37.     }
  38. }
  40. // 此函数旨在从购物清单和数组中删除用户选择的指定项目
  41. deleteItem = (arr) => {
  42.     let red = document.getElementById("close");
  43.     const index = arr.indexOf(red);
  44.     const x = arr.splice(index, 1);
  45.     console.log(arr);
  46.     console.log(x);
  47.     list1.innerHTML = '';
  48.     arrayList(myArray);
  49.     idSelector();
  50. }

请注意，HTML 和 JavaScript 代码已被翻译成中文。

英文:

I am creating a program that contains items for a shopping list and then the user can add items to the list. I want the user to able to delete items from the shopping list by simply clicking on the item. When I click on the item, the last item gets deleted no matter which item I click on. I just want to find out why only the last item in my array is getting deleted instead of the item that I am selecting.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;title&gt;Shopping List&lt;/title&gt;
  7. &lt;!-- Link Google Font --&gt;
  8. &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Nunito&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  9. &lt;!-- External CSS link--&gt;
  10. &lt;link rel=&quot;stylesheet&quot; href=&quot;./css/styles.css&quot;&gt;
  11. &lt;/head&gt;
  12. &lt;body&gt;
  13. &lt;div class=&quot;container&quot;&gt;
  14. &lt;h2&gt;Shopping List&lt;/h2&gt;
  15. &lt;div class=&quot;header&quot;&gt;
  16. &lt;input type=&quot;text&quot; id=&quot;input&quot; placeholder=&quot;Item&quot;&gt;
  17. &lt;span onclick=&quot;updateList(myArray)&quot; id=&quot;addBtn&quot;&gt;&lt;button&gt;Add Item&lt;/button&gt;&lt;/span&gt;
  18. &lt;/div&gt;
  19. &lt;span value=&quot;\uOOD7&quot; class=&quot;close&quot; onclick=&quot;deleteItem(myArray)&quot;&gt;
  20. &lt;ul id=&quot;itemList&quot;&gt;
  21. &lt;/ul&gt;
  22. &lt;/span&gt;
  23. &lt;/div&gt;
  24. &lt;script src=&quot;mainForTask2.js&quot;&gt;&lt;/script&gt;
  25. &lt;/body&gt;
  26. &lt;/html&gt;
  27. Javascript
  28. //This is a javascript program which added the items in my array to an unordered list
  29. let myArray = [&quot;Sugar&quot;, &quot;Milk&quot;, &quot;Bread&quot;, &quot;Apples&quot;];
  30. let list1 = document.querySelector(&quot;#itemList&quot;);
  31. //This function pushed my array items to create the list
  32. arrayList = (arr) =&gt; {
  33. let items = arr.forEach(item =&gt; {
  34. let li = document.createElement(&#39;li&#39;);
  35. li.textContent = item;
  36. list1.appendChild(li)
  37. });
  38. }
  39. arrayList(myArray)
  40. //This function changed the background color of two of the list items to show that they are sold
  41. const idSelector = () =&gt; {
  42. let idElement = document.getElementsByTagName(&quot;li&quot;)
  43. idElement[0].style.color = &quot;red&quot;
  44. idElement[3].style.color = &quot;red&quot;
  45. console.log(idElement.value)
  46. }
  47. idSelector()
  48. //This function uses the user input from the form to add items to the list
  49. updateList = (arr) =&gt; {
  50. let blue = document.getElementById(&quot;input&quot;).value;
  51. if (blue === &quot;&quot;) {
  52. alert(&quot;Please enter a value if you wish to add something to your 
  53. list.&quot;)
  54. } else {
  55. arr.push(blue);
  56. list1.innerHTML = &#39;&#39;;
  57. arrayList(myArray)
  58. idSelector()
  59. }
  60. }
  61. //This function is meant to delete the specified item chosen by the user from the shopping list and the array
  62. deleteItem = (arr) =&gt; {
  63. let red = document.getElementById(&quot;close&quot;);
  64. const index = arr.indexOf(red);
  65. const x = arr.splice(index, 1)
  66. console.log(arr)
  67. console.log(x)
  68. list1.innerHTML = &#39;&#39;;
  69. arrayList(myArray)
  70. idSelector()
  71. }

答案1

得分: 0

首先，我们需要找到被点击的元素，然后找到其索引，然后从数组中移除特定的元素。

  1. let myArray = ["Sugar", "Milk", "Bread", "Apples"];
  2. let list1 = document.querySelector("#itemList");
  4. // 这个函数将数组中的项目添加到列表中
  5. arrayList = (arr) => {
  6.   let items = arr.forEach(item => {
  7.     let li = document.createElement('li');
  8.     li.textContent = item;
  9.     list1.appendChild(li)
  10.   });
  11. }
  13. arrayList(myArray)
  15. // 这个函数将两个列表项的背景颜色更改为红色，以显示它们已售出
  16. const idSelector = () => {
  17.   let idElement = document.getElementsByTagName("li")
  18.   idElement[0].style.color = "red"
  19.   idElement[3].style.color = "red"
  20. }
  22. idSelector()
  24. // 这个函数使用表单中的用户输入将项目添加到列表中
  25. updateList = (arr) => {
  26.   let blue = document.getElementById("input").value;
  28.   if (blue === "") {
  29.     alert("如果您希望添加东西到您的列表，请输入一个值。")
  30.   } else {
  31.     arr.push(blue);
  32.     list1.innerHTML = '';
  33.     arrayList(myArray)
  34.     idSelector()
  35.   }
  37. }
  39. // 这个函数旨在从购物列表和数组中删除用户选择的指定项目
  40. deleteItem = (event) => {
  41.   let clk = event.target.innerHTML;
  42.   //console.log(clk);
  43.   let index = myArray.indexOf(clk);
  44.   if (index > -1) 
  45.   {
  46.     myArray.splice(index, 1);
  47.   }
  48.   list1.innerHTML = '';
  49.   arrayList(myArray)
  50. }

HTML 部分保持不变。

英文:

Here first we need to find the clicked element than find its index and than remove the particular element from the array.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let myArray = [&quot;Sugar&quot;, &quot;Milk&quot;, &quot;Bread&quot;, &quot;Apples&quot;];
  2. let list1 = document.querySelector(&quot;#itemList&quot;);
  3. //This function pushed my array items to create the list
  4. arrayList = (arr) =&gt; {
  5. let items = arr.forEach(item =&gt; {
  6. let li = document.createElement(&#39;li&#39;);
  7. li.textContent = item;
  8. list1.appendChild(li)
  9. });
  10. }
  11. arrayList(myArray)
  12. //This function changed the background color of two of the list items to show that they are sold
  13. const idSelector = () =&gt; {
  14. let idElement = document.getElementsByTagName(&quot;li&quot;)
  15. idElement[0].style.color = &quot;red&quot;
  16. idElement[3].style.color = &quot;red&quot;
  17. }
  18. idSelector()
  19. //This function uses the user input from the form to add items to the list
  20. updateList = (arr) =&gt; {
  21. let blue = document.getElementById(&quot;input&quot;).value;
  22. if (blue === &quot;&quot;) {
  23. alert(&quot;Please enter a value if you wish to add something to your list.&quot;)
  24. } else {
  25. arr.push(blue);
  26. list1.innerHTML = &#39;&#39;;
  27. arrayList(myArray)
  28. idSelector()
  29. }
  30. }
  31. //This function is meant to delete the specified item chosen by the user from the shopping list and the array
  32. deleteItem = (event) =&gt; {
  33. let clk = event.target.innerHTML;
  34. //console.log(clk);
  35. let index = myArray.indexOf(clk);
  36. if (index &gt; -1) 
  37. {
  38. myArray.splice(index, 1);
  39. }
  40. list1.innerHTML = &#39;&#39;;
  41. arrayList(myArray)
  42. }

<!-- language: lang-html -->

  1. &lt;body&gt;
  2. &lt;div class=&quot;container&quot;&gt;
  3. &lt;h2&gt;Shopping List&lt;/h2&gt;
  4. &lt;div class=&quot;header&quot;&gt;
  5. &lt;input type=&quot;text&quot; id=&quot;input&quot; placeholder=&quot;Item&quot;&gt;
  6. &lt;span onclick=&quot;updateList(myArray)&quot; id=&quot;addBtn&quot;&gt;&lt;button&gt;Add Item&lt;/button&gt;&lt;/span&gt;
  7. &lt;/div&gt;
  8. &lt;span value=&quot;\uOOD7&quot; class=&quot;close&quot; onclick=&quot;deleteItem(event)&quot;&gt;
  9. &lt;ul id=&quot;itemList&quot;&gt;
  10. &lt;/ul&gt;
  11. &lt;/span&gt;
  12. &lt;/div&gt;
  13. &lt;script src=&quot;mainForTask2.js&quot;&gt;&lt;/script&gt;
  14. &lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 19:49:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76431567.html
  • dom-events
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定