How to make minus icon disappear using for in loop-CodePudding

When click on save button function myfunc2 will be exceuted which use a for in loop to iterate the minus array. This array conatain all the minus icon. i set style.display = 'none' and expect when i click the save button the icon will disappear, but it didn't work. i dont know what went wrong

const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementByClassName('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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--js-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <h1>Bucket list</h1>
        <button type="submit" >Add item</button>
        <form>
            <!--d-flex overide item-->
            <div >
                <input type="text" >
                <a href="#" ><i ></i></a>
                <a href="#"><i ></i></a>
            </div>
            <div >
                <input type="text" >
                <a href="#" ><i ></i></a>
                <a href="#"><i ></i></a>
            </div>
            <div >
                <input type="text" >
                <a href="#" ><i ></i></a>
                <a href="#"><i ></i></a>
            </div>
            <button type="submit" >Save</button>
            <button type="submit" >Edit</button>
        </form>
    </div>
    <script src="js.js"></script>
</body>
</html>

CodePudding user response：

There are 2 things you are doing wrong. First of all,

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

should be

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

Secondly, save_btn would now be an array since you have gotten multiple elements by class name (hence the getElementsByClassName) plural form.

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)

So calling save_btn.addEventListener('click',myfunc2); wouldn't work since you are trying to assign this to an array. You either use

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

or, a more recommended approach, give the button an id and use getElementById() (doc)

CodePudding user response：

If you want to disappear ALL minus icons you can do:

const minus = document.getElementsByClassName('minus');

[].forEach.call(minus, function (m) {
 m.style.display = 'none';
});

document.getElementsByClassName('minus') is not an array is an HtmlCollection, to iterate over it first you need to convert it to array.