如何在纯Javascript中选择嵌套元素？

Posted 2023-01-29

这可能很简单，但是我正在努力如何在click事件中定位元素。我将其与jQuery配合使用，但我想使用纯javascript来实现。基本上我有这个列表：

  <ul class= 'my-todo-list'>
     <li id="todo-1" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-2" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-3" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
  </ul>

而且我的JavaScript看起来像这样：

 document.querySelector('.todo a.delete').addEventListener('click', function(e)

    var listElement = this.parentNode.parentElement;
    var todoId = listElement.getAttribute('id').replace('todo-','');
    alert(todoId);
 );

我想要的是，如果我单击删除链接，我应该看到待办事项的ID。例如，如果我单击第二个删除链接，则应提醒“ todo-2”。

NOTE：我尝试了document.querySelector（'。todo a.delete'），但它也不起作用。

使用jQuery的简单解决方案是

 $('.todo a.delete').live('click', function()......)

但是我想用纯JavaScript来做。有人可以帮我吗？提前非常感谢！

答案

您可以在ul元素上添加事件侦听器，并检查触发click事件的元素是否包含delete类。如果是这样，请从包装触发事件的特定元素的id元素中获取li属性

const $ul = document.querySelector('ul');

$ul.addEventListener('click', (e) => 
  if (e.target.matches('a.delete')) 
    const li = e.target.parentElement.parentElement;
    const id = li.getAttribute('id');
    alert(id);
  
);

<ul>
     <li id="todo-1" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-2" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-3" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
  </ul>

另一答案

您可以使用querySelectorAll和map将事件映射为：>

[...document.querySelectorAll('.todo a.delete')].map((item) => 
    item.addEventListener('click', function(e)

    var listElement = this.parentNode.parentElement;
    var todoId = listElement.getAttribute('id').replace('todo-','');
    alert(todoId);
    )
 );

[...document.querySelectorAll('.todo a.delete')].map((item) => 
    item.addEventListener('click', function(e)

    var listElement = this.parentNode.parentElement;
    var todoId = listElement.getAttribute('id').replace('todo-','');
    alert(todoId);
    )
 );
<ul class= 'my-todo-list'>
     <li id="todo-1" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-2" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-3" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
  </ul>


 

以上是关于如何在纯Javascript中选择嵌套元素？的主要内容，如果未能解决你的问题，请参考以下文章

如何在纯 JavaScript 中平滑滚动到元素

是啥导致无法在纯 JavaScript 中检测到滚动到 HTML 元素的底部？

有啥方法可以在纯 javascript 中将元素作为函数获取？

$(document).on() 在纯 JavaScript 中？

如何在纯javascript中显示和隐藏弹出的onclick？

JSX 在纯 JavaScript 文件中工作，如何？