有多个input和清除按钮的列表，点击每个清除按钮，按钮旁边的2个input清空值。

作者：Terry2025.02.18来源：Web前端之家浏览：1312评论:0

关键词：JavaScript

要实现点击清除按钮时清空其旁边的两个输入框的值，我们可以调整之前的代码。下面是更新后的示例代码，展示了如何完成这个功能。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>清除输入框示例</title>  
</head>  
<body>  
    <div>  
        <input type="text" placeholder="输入框 1">  
        <input type="text" placeholder="输入框 2">  
        <button>清除</button>  
    </div>  
    <div>  
        <input type="text" placeholder="输入框 3">  
        <input type="text" placeholder="输入框 4">  
        <button>清除</button>  
    </div>  
    <div>  
        <input type="text" placeholder="输入框 5">  
        <input type="text" placeholder="输入框 6">  
        <button>清除</button>  
    </div>  

    <script>
        document.addEventListener('DOMContentLoaded', () => {  
    const clearButtons = document.querySelectorAll('.clear-btn');  

    clearButtons.forEach(button => {  
        button.addEventListener('click', () => {  
            const inputFields = button.parentElement.querySelectorAll('input'); // 获取同一父元素下的所有输入框  
            inputFields.forEach(input => {  
                input.value = ''; // 清空输入框的值  
            });  
        });  
    });  
});
    </script>  
</body>  
</html>

说明

HTML 结构：

每个输入组内有两个输入框和一个清除按钮。

JavaScript 逻辑：

同样使用 DOMContentLoaded 事件。
使用 querySelectorAll 获取所有清除按钮，并为每个按钮添加点击事件。
在点击事件中，通过 button.parentElement.querySelectorAll('input') 获取同一父元素内的所有输入框，然后遍历这些输入框并清空它们的值。

这样，点击每个按钮时，按钮旁边的两个输入框都会被清空。如果你需要其他的功能或有更多问题，请随时问我！

赏您的支持是我们创作的动力！