i made an input tag using js after click an icon. I want to hide input tag after i click icon again.. here is my js code
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);
});
You can go two ways...
Create the search input element as a permanent DOM element and hide/unhide it as necessary.
If you want to keep the element dynamic, try coding it like this...
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);
}
});