js 최근 검색어 저장

Wonhyo LEE·2023년 4월 27일
0
     let hashtags=[];

        function saveHashtag(){
            let hashtag = document.getElementById("inputHashtag").value;
            if (!hashtag){return;}
            hashtags.push(hashtag);

            // 버튼을 생성할 부모 요소
            const parentElement = document.querySelector(".hashtag-inner");

            parentElement.innerHTML = "";
            document.getElementById("inputHashtag").value = "";

            for (let i = 0; i < hashtags.length; i++) {
                const button = document.createElement("button");
                button.classList.add("button");
                button.classList.add("-ghost");
                button.classList.add("-hashtag");
                button.id = "button-" + i;
                button.type='button';
                button.textContent = hashtags[i];
                parentElement.appendChild(button);

                const close = document.createElement("span");
                close.textContent = "x";
                close.classList.add("close");

                button.appendChild(close);

                close.addEventListener("click", function(event) {
                    const button = event.target.parentNode;
                    const index = hashtags.indexOf(button.textContent);
                    hashtags.splice(index, 1);
                    button.parentNode.removeChild(button);
                    console.log(hashtags);
                });
            }
        };


      <th scope="row">해시태그</th>
        <td class="-vat">
          <div class="fields">
            <div class="field">
              <input type="text" title="성능점검 URL" name="inputHashtag" id="inputHashtag" style="width:400px"/>
            </div>
        	<button type="button" class="button -ghost" onclick="saveHashtag()">등록</button>
        </div>
        	<div class="hashtag-inner">
          	</div>
      </td>
profile
프론트마스터를 꿈꾸는...

0개의 댓글