Показать кнопку закрытия для каждого элемента и скрыть текущий элемент с помощью JavaScript

Question

У меня есть список <ul> с некоторыми полями <input>, и мне нужно показать элемент <span class="delete-link"> при наведении мыши на фактическое поле.

А когда пользователь нажимает кнопку закрытия X, скрывает текущий элемент <li> из списка.

Я пытаюсь сделать это с vanilla JavaScript , и я застрял в этой точке. Мой код показывает только первую кнопку закрытия, независимо от того, в каком поле я нахожу курсор.

HTML

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link" onclick=''>X</span>
  </li>
    <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
    <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
</ul>

CSS

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

JS

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
    el.addEventListener('mouseover', function(){
        closeBtn.style.opacity = 1;
    });
      el.addEventListener('mouseout', function(){
        closeBtn.style.opacity = 0;
    });
    var closeBtn = document.querySelector('.social-link .delete-link');

    for (i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener("click", function() {
        this.parentElement.style.display = 'none';
      });
    }
});

Проверьте это JSFiddle .

Answer 1

Ваша проблема связана с вашим селектором closeBtn. То, как вы сейчас пишете, на самом деле не выбирает дочерний элемент для вашего родителя. Это на самом деле захватывает первый элемент, который соответствует вашему селектору, а не ВСЕ элементы, которые вы хотите.

Что вы хотите сделать, это создать переменную специально для дочернего диапазона.

var closeBtn = el.querySelectorAll(".delete-link")[0];

Это определенно получит диапазон .delete-link для текущего элемента. После этого вы можете отказаться от цикла for, это совершенно не нужно.

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
    var closeBtn = el.querySelectorAll(".delete-link")[0];

    el.addEventListener('mouseover', function(){
        closeBtn.style.opacity = 1;
    });
    el.addEventListener('mouseout', function(){
        closeBtn.style.opacity = 0;
    });

    closeBtn.addEventListener("click", function() {
       this.parentElement.style.display = 'none';
    })
});

Рабочая скрипка: http://jsfiddle.net/0u7jxtfk/2/

Answer 2

Вы можете значительно упростить код, используя css, чтобы скрыть / показать ссылку для удаления. Вы также можете ссылаться на ссылку удаления непосредственно из узла социальной ссылки.

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  closeBtn.addEventListener("click", function() {
    el.style.display = 'none';
  });
});

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

.social-link .delete-link {
  opacity: 0;
}

.social-link:hover .delete-link {
  opacity: 1;
}

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link" onclick=''>X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
</ul>

Answer 3

Довольно там.

---

Просто сохраните ваш элемент .delete-link в переменной (closeBtn) для большей управляемости и добавьте к нему прослушиватель событий click:

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  
  el.addEventListener('mouseover', function() {    
    closeBtn.style.opacity = 1;
  });

  el.addEventListener('mouseout', function() {
    closeBtn.style.opacity = 0;
  });
  
  closeBtn.addEventListener('click', function() {
    closeBtn.parentElement.style.display = 'none';
  });
});

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-1">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-2">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-3">
    <span class="delete-link">X</span>
  </li>
</ul>

Я изменил заполнители ваших полей ввода, чтобы было ясно, что был изменен нужный элемент .