タグ入力(チップ追加)

<div class="d04-03-02-wrap">
          <span class="d04-03-02-label">スキルタグ</span>
          <div class="d04-03-02-box">
            <span class="d04-03-02-chip">WordPress<button type="button" aria-label="削除">&times;</button></span>
            <span class="d04-03-02-chip">PHP<button type="button" aria-label="削除">&times;</button></span>
            <input class="d04-03-02-input" type="text" placeholder="入力しEnter">
          </div>
        </div>

.d04-03-02-wrap{width:min(280px,100%)}
        .d04-03-02-label{display:block;margin:0 0 8px;font-size:12px;color:#8a93a3}
        .d04-03-02-box{
          display:flex;flex-wrap:wrap;gap:6px;padding:8px;
          border:2px solid #d5d9e0;border-radius:8px;background:#fff;
          transition:border-color .2s;
        }
        .d04-03-02-box:focus-within{border-color:#4a6cf7}
        .d04-03-02-chip{
          display:inline-flex;align-items:center;gap:6px;
          padding:5px 6px 5px 10px;font-size:13px;color:#334;
          background:#eef2ff;border-radius:14px;
        }
        .d04-03-02-chip button{
          border:none;background:#c9d3f0;color:#334;width:16px;height:16px;
          border-radius:50%;cursor:pointer;font-size:12px;line-height:1;
          display:flex;align-items:center;justify-content:center;
        }
        .d04-03-02-chip button:hover{background:#a9b8e8}
        .d04-03-02-input{
          flex:1;min-width:100px;border:none;outline:none;font-size:13px;
          padding:5px 4px;background:transparent;
        }

(function(){
        var box=document.querySelector('.d04-03-02-box');
        if(!box)return;
        var input=box.querySelector('.d04-03-02-input');
        function addChip(v){
          v=v.trim();
          if(!v)return;
          var chip=document.createElement('span');
          chip.className='d04-03-02-chip';
          chip.textContent=v;
          var btn=document.createElement('button');
          btn.type='button';
          btn.setAttribute('aria-label','削除');
          btn.innerHTML='×';
          btn.addEventListener('click',function(){chip.remove();});
          chip.appendChild(btn);
          box.insertBefore(chip,input);
        }
        box.querySelectorAll('.d04-03-02-chip button').forEach(function(btn){
          btn.addEventListener('click',function(){btn.parentElement.remove();});
        });
        input.addEventListener('keydown',function(e){
          if(e.key==='Enter'){
            e.preventDefault();
            addChip(input.value);
            input.value='';
          }
        });
      })();