显示每个项目的关闭按钮并使用 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

您可以通过使用 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 2

您的问题在于您的 closeBtn 选择器。您当前编写它的方式，实际上并没有为您的父母选择子元素。它实际上是抓取与您的选择器匹配的第一个项目，而不是您想要的所有项目。

您要做的是专门为 span child 创建一个变量。

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 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>

我更改了您输入字段的占位符，以便明确修改了正确的元素。