用JavaScript．完成添加、删除列表的内容，例3-5。 注：所有事件调用自定义函数完成功能。

题目:．添加、删除列表的内容，例3-5。
注：所有事件调用自定义函数完成功能。

  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7568947
  • 你也可以参考下这篇文章：原生JavaScript 中绑定事件，绑定点击事件，鼠标时间，双击事件
  • 除此之外, 这篇博客: JavaScript 自定义事件如此简单！中的 📚一、什么是自定义事件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 在日常开发中，我们习惯监听页面许多事件，诸如：点击事件（ click ）、鼠标移动事件（ mousemove ）、元素失去焦点事件（ blur ）等等。


    事件本质是一种通信方式，是一种消息，只有在多对象多模块时，才有可能需要使用事件进行通信。在多模块化开发时，可以使用自定义事件进行模块间通信。


    当某些基础事件无法满足我们业务，就可以尝试 自定义事件来解决。

  • 以下回答由chatgpt基于相关博客总结生成:

    问题回答:

    对于这道题，我们需要编写一个JavaScript函数来实现在列表中添加和删除内容的功能。

    首先，我们需要定义一个数组来保存列表的内容。然后，我们可以通过使用DOM方法来创建列表元素，并将其添加到HTML文档中。接下来，我们可以通过事件调用自定义函数来添加和删除列表内容。

    具体步骤如下：

    1. 定义一个数组来保存列表的内容。
    var list = [];
    1. 创建一个函数来添加一个新的列表项，并将其添加到HTML文档中。
    function addListItem(item) {
  // 创建一个新的li元素
  var li = document.createElement('li');
  // 将传入的item作为li元素的文本内容
  li.textContent = item;
  // 将li元素添加到ul列表中
  document.querySelector('ul').appendChild(li);
  // 将新的item添加到list数组中
  list.push(item);
}
    1. 创建一个函数来删除一个列表项，并从HTML文档中移除它。
    function removeListItem(item) {
  // 查找列表中对应的li元素
  var li = document.querySelector('li:contains(' + item + ')');
  // 如果找到了匹配的li元素，则移除它
  if (li) {
    li.parentNode.removeChild(li);
    // 从list数组中删除对应的item
    list.splice(list.indexOf(item), 1);
  }
}
    1. 在HTML文档中添加两个按钮来调用addListItem和removeListItem函数。我们可以使用addEventListener方法来监听按钮的点击事件。
    <button id="add">Add Item</button>
<button id="remove">Remove Item</button>

    document.getElementById('add').addEventListener('click', function() {
  var item = prompt('Enter a new item:');
  if (item) {
    addListItem(item);
  }
});

document.getElementById('remove').addEventListener('click', function() {
  var item = prompt('Enter an item to remove:');
  if (item) {
    removeListItem(item);
  }
});
    1. 最后，我们可以根据需要进行样式、布局等的修改和调整，以便更好地展示我们的列表。

    完整的代码如下：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript List Example</title>
  <style>
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }
    button {
      margin-right: 10px;
    }
  </style>
</head>
<body>

  <h1>JavaScript List Example</h1>

  <ul>
  </ul>

  <button id="add">Add Item</button>
  <button id="remove">Remove Item</button>

  <script>
    var list = [];

    function addListItem(item) {
      var li = document.createElement('li');
      li.textContent = item;
      document.querySelector('ul').appendChild(li);
      list.push(item);
    }

    function removeListItem(item) {
      var li = document.querySelector('li:contains(' + item + ')');
      if (li) {
        li.parentNode.removeChild(li);
        list.splice(list.indexOf(item), 1);
      }
    }

    document.getElementById('add').addEventListener('click', function() {
      var item = prompt('Enter a new item:');
      if (item) {
        addListItem(item);
      }
    });

    document.getElementById('remove').addEventListener('click', function() {
      var item = prompt('Enter an item to remove:');
      if (item) {
        removeListItem(item);
      }
    });
  </script>

</body>
</html>

    注：上述代码并非唯一可行的解决方案，可能存在优化和改进的空间。

img


保存html代码到文件中，


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript List Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li {
            margin: 5px;
            padding: 5px;
            border: 1px solid #ccc;
            background-color: #f6f6f6;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        li span {
            margin-right: 10px;
        }
        li button {
            margin-left: 10px;
            padding: 5px;
            border: none;
            background-color: #f44336;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>JavaScript 列表示例</h1>
<p>在输入框中输入新的项目，然后点击“添加”按钮将其添加到列表中。</p>
<input type="text" id="newItem">
<button onclick="addItem()">Add</button>
<ul id="list">
    <li><span>Item 1</span><button onclick="deleteItem(this)">Delete</button></li>
    <li><span>Item 2</span><button onclick="deleteItem(this)">Delete</button></li>
    <li><span>Item 3</span><button onclick="deleteItem(this)">Delete</button></li>
</ul>
<script>
  function addItem() {
    var input = document.getElementById("newItem");
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var span = document.createElement("span");
    var button = document.createElement("button");
    span.innerHTML = input.value;
    button.innerHTML = "Delete";
    button.onclick = function() {
      deleteItem(this);
    }
    li.appendChild(span);
    li.appendChild(button);
    ul.appendChild(li);
    input.value = "";
  }

  function deleteItem(button) {
    var li = button.parentNode;
    var ul = li.parentNode;
    ul.removeChild(li);
  }
</script>
</body>
</html>