Javascript 清除输入[文本]中的按钮

//我在英语方面可能有很大的问题，但我希望你能理解

一般来说，我试着使用Marco的代码，但我在使用图标而不是文本按钮时遇到了一个大问题。我把它遮住，给它一个透明的背景，删除了轮廓和边框。这对我没有帮助。我是这样解决的：

$（“.clearbutton”）。单击（函数（）{
$（“.clearable”）.val（“”）；
});
：：-webkit输入占位符{
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：首字母；
}
：-moz占位符{/*Firefox 18-*/
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
：-moz占位符{/*Firefox19+*/
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
：-ms输入占位符{
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
输入[type=“text”]{
背景图像：线性梯度（#FAFAFA，#f1f1）；
边界半径：4px；
边框宽度：0.5px；
边框颜色：#阿巴巴；
填充：3px6px；
大纲：无；
边框样式：实心；
颜色：#阿巴巴；
文本阴影：0px 0px 0px 000000；
-webkit文本填充颜色：透明；
}
输入[type=“text”]：-webkit输入占位符{text indent:0px；转换：text indent 0.3s ease；}
输入[type=“text”]：-moz占位符{text indent:0px；转换：text indent 0.3s ease；}
输入[type=“text”]：-moz占位符{文本缩进：0px；转换：文本缩进0.3s；}
输入[type=“text”]：-ms输入占位符{文本缩进：0px；转换：文本缩进0.3s；}
输入[type=“text”]：焦点：：-webkit输入占位符{text indent:-500px；转换：text indent 0.3s ease；}
输入[type=“text”]：焦点：：-moz占位符{text indent:-500px；转换：text indent 0.3s ease；}
输入[type=“text”]：焦点：-moz占位符{文本缩进：-500px；转换：文本缩进0.3s；}
输入[type=“text”]：焦点：-ms输入占位符{文本缩进：-500px；转换：文本缩进0.3s；}
.uitextbox{
显示：表格；
}
.clearbutton{
大纲：无；
边界：无；
背景：无；
位置：绝对位置；
右边距：25px；
利润上限：2.5px；
}

试验
重置按钮和输入需要在表单中。请注意，重置按钮将重置整个表单



重置
如果我是对的，您希望按钮位于输入字段内

这样：


$（“按钮”）。单击（函数（）{
$（“.clearable”）.val（“”）；
});
@导入url（'https://fonts.googleapis.com/css?family=Roboto');
html{
字体系列：“Roboto”，无衬线；
}
：-webkit输入占位符{
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：首字母；
}
：-moz占位符{/*Firefox 18-*/
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
：-moz占位符{/*Firefox19+*/
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
：-ms输入占位符{
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
输入[type=“text”]{
背景图像：线性梯度（#FAFAFA，#f1f1）；
边界半径：4px；
边框宽度：0.5px；
边框颜色：#阿巴巴；
填充：3px6px；
大纲：无；
边框样式：实心；
颜色：#阿巴巴；
文本阴影：0px 0px 0px 000000；
-webkit文本填充颜色：透明；
}
输入[type=“text”]：-webkit输入占位符{text indent:0px；转换：text indent 0.3s ease；}
输入[type=“text”]：-moz占位符{text indent:0px；转换：text indent 0.3s ease；}
输入[type=“text”]：-moz占位符{文本缩进：0px；转换：文本缩进0.3s；}
输入[type=“text”]：-ms输入占位符{文本缩进：0px；转换：文本缩进0.3s；}
输入[type=“text”]：焦点：：-webkit输入占位符{text indent:-500px；转换：text indent 0.3s ease；}
输入[type=“text”]：焦点：：-moz占位符{text indent:-500px；转换：text indent 0.3s ease；}
输入[type=“text”]：焦点：-moz占位符{文本缩进：-500px；转换：文本缩进0.3s；}
输入[type=“text”]：焦点：-ms输入占位符{文本缩进：-500px；转换：文本缩进0.3s；}
div{
显示：表格；
}
钮扣{
位置：绝对位置；
左边距：-62px；
页边顶部：1px；
}

试验
清楚的
如果无法按照VilleKoo的建议将其放入表单中，还可以添加一个按钮来清除值，如下所示，以清除找到的第一个文本输入


@导入url（'https://fonts.googleapis.com/css?family=Roboto');
html{
字体系列：“Roboto”，无衬线；
}
：-webkit输入占位符{
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：首字母；
}
：-moz占位符{/*Firefox 18-*/
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
：-moz占位符{/*Firefox19+*/
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
：-ms输入占位符{
文本对齐：居中；
文本阴影：无；
-webkit文本填充颜色：初始
}
输入[type=“text”]{
背景图像：线性梯度（#FAFAFA，#f1f1）；
边界半径：4px；
边框宽度：0.5px；
边框颜色：#阿巴巴；
填充：3px6px；
大纲：无；
边框样式：实心；
颜色：#阿巴巴；
文本阴影：0px 0px 0px 000000；
-webkit文本填充颜色：透明；
}
输入[type=“text”]：-webkit输入占位符{text indent:0px；转换：text indent 0.3s ease；}
输入[type=“text”]：：-moz-p