两个 div 具有相同的类名和 ID，但位于页面的不同组件。如果我尝试清除一个输入，另一个 div 输入也会被清除答案

【问题标题】：Two divs having same class name and ID but at different component of the page. If I try to clear one input the other div input is also cleared两个 div 具有相同的类名和 ID，但位于页面的不同组件。如果我尝试清除一个输入，另一个 div 输入也会被清除
【发布时间】：2023-03-06 14:43:01
【问题描述】：

<!-- language: lang-js -->

    $('.clear-icon').click(function(){
      $('input').val('');
     })


<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="input-outer">
        <input type="text">
        <button class="clear-icon">X</button>
    </div>
    <div id="input-outer">
        <input type="text">
        <button class="clear-icon">X</button>
    </div>

<!-- end snippet -->

我试图单独清除一个值，但两个值都被删除。如何通过仅清除单击哪个按钮的输入字段来控制它

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/…
@Teemu 这里的 html 是从 CMS 呈现的，并且它们在多个页面中具有相同的输入字段，因此我们无法控制向输入字段添加 id
当它创建无效的 HTML 时，我会放弃这样的 CMS。
id 必须是唯一的，如 MDN 网站所述，如果不是，则输入应具有 name 属性并且必须是唯一的，以便 JavaScript 选择器可以对特定输入起作用。如果没有什么独特之处，您可以使用 siblings 之类的东西来清除，但将来您可能会发现另一个问题。

标签： javascript html jquery css

【解决方案1】：

添加siblings

$('.clear-icon').click(function(){
      $(this).siblings('input').val('');
     })

$('.clear-icon').click(function(){
      $(this).siblings('input').val('');
     })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="input-outer">
        <input type="text">
        <button class="clear-icon">X</button>
    </div>
    <div id="input-outer">
        <input type="text">
        <button class="clear-icon">X</button>
    </div>

【讨论】：