Delete Child Span after Child Span Delete remaing Child auto rearrange why?

Question

Here is my Javascript 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 => !!a).join(",");
  var arr = str.split(',');
  for (var k = 0; k < 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;
    }
  }
}

and html code where runtime spans create

<input type="text" class="keyword-input with-border @error('name') is-invalid @enderror" name="skills" placeholder="Add Skills">

<div class="invalid-feedback" style="color: red;font-size: 20px"></div>
<button type="button" class="keyword-input-button ripple-effect" onclick="validspan()"><i class="icon-material-outline-add" ></i></button>

</div>
<div class="keywords-list">
  <!-- keywords go here -->

</div>

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

Where is the code that *adds* the child node to the keyword-list? If user enters key that is already in list, why would you *delete* it from the list? Why not just ignore the input and leave it (once) in the list? — trincot, Jan 11 '20 at 15:41

score 0 · Answer 1 · answered Jan 11 '20 at 11:48

i guess you are looking for something like this?

(() => {
  const btnEl = document.querySelector('#add_skill');
  const inputEl = document.querySelector('#skills');
  const resultsEl = document.querySelector('#keywords-list');
  const arr = [];
  arr.add = function(val) {
    this.push(val);
    resultsEl.innerHTML = arr.map(item => `<span>${val}</span>`).join('');
  };
  btnEl.addEventListener('click', (e) => {
    let val = inputEl.value;
    if (!val) {
      console.error(`A value is required`);
      return;
    }
    if (arr.includes(val)) {
      console.error(`Don't Enter Same Skill`);
      return;
    }
    arr.add(val);
  });
})();

<input type="text" class="keyword-input with-border @error('name') is-invalid @enderror" id="skills" name="skills" placeholder="Add Skills">

<div class="invalid-feedback" style="color: red;font-size: 20px"></div>
<button type="button" id="add_skill" class="keyword-input-button ripple-effect"><i class="icon-material-outline-add" ></i>Add</button>

</div>
<div class="keywords-list" id="keywords-list">
  <!-- keywords go here -->

</div>

score 0 · Answer 2 · answered Jan 11 '20 at 12:14

in your for loop, you are terminating the execution directly and breaking from it by using the return keyword in both the if statement and the else statement, so basically what your code is doing is just testing the first index (0) and omitting all the other indexes! you need to remove the return statements and then continue editing your code to handle other cases! you can understand better about return inside a for loop with the answers in this question : question hope that helped!

Delete Child Span after Child Span Delete remaing Child auto rearrange why?

2 Answers2