單擊圖標后隱藏由js制作的輸入標簽

Question

單擊圖標后，我使用 js 創建了一個輸入標簽。 我想在再次單擊圖標后隱藏輸入標簽。這是我的 js 代碼

const icon = document.querySelector('.menu li:nth-child(1)');

icon.addEventListener("click", function () {
    const input = document.createElement('input');
    input.setAttribute('type', 'search');
    input.placeholder = 'search';
    const ul = document.querySelector('.menu');
    const li = document.querySelector('.menu li:nth-child(1)');
    ul.insertBefore(input, li);

});

Answer 1

您可以通過兩種方式撥打 go...

1. 將搜索輸入元素創建為永久 DOM 元素，並根據需要隱藏/取消隱藏它。

2. 如果你想保持元素動態，嘗試像這樣編碼......

    icon.addEventListener("click", function () { const search_input_elem = document.getElementById("search_input"); if (search_input_elem){ search_input_elem.remove(); } else { const input = document.createElement('input'); input.setAttribute('type', 'search'); input.placeholder = 'search'; const ul = document.querySelector('.menu'); const li = document.querySelector('.menu li:nth-child(1)'); ul.insertBefore(input, li); }

   });