title: Delete Child Span after Child Span Delete remaing Child auto rearrange why?
body: <p><a href="https://i.stack.imgur.com/DW4B7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DW4B7.png" alt="enter image description here"></a></p>
  
  <p>Here is my Javascript code:</p>
  
  <pre><code>function validspan() {
    var data = document.querySelector('.keyword-input').value;
    var nodes = document.querySelectorAll('.keywords-list span');
    var str = Array.prototype.map.call(nodes, function(node) {
      return node.textContent;
    }).filter(a =&gt; !!a).join(",");
    var arr = str.split(',');
    for (var k = 0; k &lt; arr.length; k++) {
      if (data == arr[k]) {
        alert("Don't Enter Same Skill");
        let list = document.querySelector('.keywords-list');
        let array = arr[k].indexOf(data);
        list.removeChild(list.childNodes[array]);
        return true;
      } else {
        alert('different values');
        return false;
      }
    }
  }
  </code></pre>
  
  <p>and html code where runtime spans create</p>
  
  <pre><code>&lt;input type="text" class="keyword-input with-border @error('name') is-invalid @enderror" name="skills" placeholder="Add Skills"&gt;
  
  &lt;div class="invalid-feedback" style="color: red;font-size: 20px"&gt;&lt;/div&gt;
  &lt;button type="button" class="keyword-input-button ripple-effect" onclick="validspan()"&gt;&lt;i class="icon-material-outline-add" &gt;&lt;/i&gt;&lt;/button&gt;
  
  &lt;/div&gt;
  &lt;div class="keywords-list"&gt;
    &lt;!-- keywords go here --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>If value match then delete index but in this my code only 0 index
  check and delete 0 idex. my requirment is when same value any index
  then delete index</p>