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>