如何使用for in循环使减号图标消失

Question

当点击保存按钮时，函数 myfunc2 将被执行，它使用 for in 循环迭代减号数组。该数组包含所有减号图标。我设置 style.display = 'none' 并期望当我单击保存按钮时图标会消失，但它没有用。我不知道出了什么问题

const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('save');

save_btn.addEventListener('click',myfunc2);
//delete all minus 
function myfunc2() {
    for(let x in minus) {
        minus[x].style.display = 'none';
    }
}

* {
    box-sizing: border-box;
}
.fa {
    padding: 5px;
    border-radius: 50%;
    border: 1px solid blue;
}
.item {
    gap: 10px;
}
a:hover {
    cursor: pointer;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--font awe-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--bs-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--js-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container mt-3">
        <h1>Bucket list</h1>
        <button type="submit" class="btn btn-primary mb-3">Add item</button>
        <form>
            <!--d-flex overide item-->
            <div class="item d-flex mb-3">
                <input type="text" class="form-control form-control">
                <a href="#" class="minus"><i class="fa fa-minus"></i></a>
                <a href="#"><i class="fa fa-pencil"></i></a>
            </div>
            <div class="item d-flex mb-3">
                <input type="text" class="form-control form-control">
                <a href="#" class="minus"><i class="fa fa-minus"></i></a>
                <a href="#"><i class="fa fa-pencil"></i></a>
            </div>
            <div class="item d-flex mb-3">
                <input type="text" class="form-control form-control">
                <a href="#" class="minus"><i class="fa fa-minus"></i></a>
                <a href="#"><i class="fa fa-pencil"></i></a>
            </div>
            <button type="submit" class="btn btn-success save">Save</button>
            <button type="submit" class="btn btn-danger">Edit</button>
        </form>
    </div>
    <script src="js.js"></script>
</body>
</html>

Answer 1

您有 2 处做错了。首先，

const save_btn = document.getElementByClassName('save');

应该是

const save_btn = document.getElementsByClassName('save');

其次，save_btn 现在是一个数组，因为您已经通过 class 名称（因此是 getElementsByClassName）复数形式获得了多个元素。

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). (doc)

所以调用 save_btn.addEventListener('click',myfunc2); 是行不通的，因为您正试图将其分配给一个数组。你要么使用

save_btn[0].addEventListener('click',myfunc2);

或者，更推荐的方法是给按钮一个 id 并使用 getElementById() (doc)

更改了以下代码段：

const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('saveBtn');

save_btn.addEventListener('click', myfunc2);
//delete all minus 
function myfunc2() {
  [].forEach.call(minus, function(m) {
    m.style.display = 'none';
  });
}

* {
  box-sizing: border-box;
}

.fa {
  padding: 5px;
  border-radius: 50%;
  border: 1px solid blue;
}

.item {
  gap: 10px;
}

a:hover {
  cursor: pointer;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--font awe-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!--bs-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!--js-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container mt-3">
    <h1>Bucket list</h1>
    <button type="submit" class="btn btn-primary mb-3">Add item</button>
    <form>
      <!--d-flex overide item-->
      <div class="item d-flex mb-3">
        <input type="text" class="form-control form-control">
        <a href="#" class="minus"><i class="fa fa-minus"></i></a>
        <a href="#"><i class="fa fa-pencil"></i></a>
      </div>
      <div class="item d-flex mb-3">
        <input type="text" class="form-control form-control">
        <a href="#" class="minus"><i class="fa fa-minus"></i></a>
        <a href="#"><i class="fa fa-pencil"></i></a>
      </div>
      <div class="item d-flex mb-3">
        <input type="text" class="form-control form-control">
        <a href="#" class="minus"><i class="fa fa-minus"></i></a>
        <a href="#"><i class="fa fa-pencil"></i></a>
      </div>
      <button type="button" id="saveBtn" class="btn btn-success save">Save</button>
      <button type="submit" class="btn btn-danger">Edit</button>
    </form>
  </div>
  <script src="js.js"></script>
</body>

</html>

如何使用for in循环使减号图标消失

How to make minus icon disappear using for in loop

html

javascript

css

icons

button