設置重置按鈕以清除文本類型的特定單個輸入

Question

我有以下幾點：

<div id="section1">
 <label> Label 1 </label>
 <br>
 <input type="text" id="input_section1">
 <button type="reset" class="clear"></button>
</div>

這就是 html 必須保持結構化的方式。 我在頁面上還有其他與上述相同的 div（稱為#section2、#section3 等），並且沒有任何輸入位於表單內。

所以我想要的是重置與其關聯的特定輸入的按鈕； 在上述情況下，輸入“#input_section1”。

當我單擊重置按鈕時，它正在清除頁面上的每個輸入。

Answer 1

一個簡單的解決方案：

<input type="button" onClick="document.getElementById('input_secion1').value='';">

這應該做你所要求的。

Answer 2

您可以使用.siblings()使用以下 jquery 代碼：

$(document).on('click','.clear',function(){
    $(this).siblings( "input" ).val('');
});

這將找到當前單擊元素的input type sibling並將其重置。

看小提琴