كيف اخصص علامة ايقونة معينة لحذف النص المدخل في صندوق البحث

في الحقيقة يمكنك إختصار الكثير من الجهد بمجرد إستعمال حقل الإدخال من النوع search كالتالي :

<input type="search" />

سيقوم هذا بتوفير حقل نصي مرفقا بعلامة الحذف جانب الحقل لمحو محتوياته أو إعادة إدخال نص جديد .

سيكون كل هذا بدلا عن :

• إنشاء هيكلية كالتالي :

<input type="text" id="text_input"/>
<i class="fa fa-close"></i>

• إضافة بعض التنسيقات لجعل الأيقونة تتموضع في أحد جوانب الحقل .
• عند الضغط على الأيقونة يتم تحديد الحقل المستهدف و حذف محتوياته :

$('i.fa-close').on('click' , function(){
    $('#text_input').val('');
}); 

يمكنك أن تستعمل عنصر input من نوع reset لإفراغ محتوى كل عناصر input في عنصر form، كالتالي:

<form>
    <input type="text">
    <input type="reset" value="Clear"/>
</form>

بهذا الشكل يمكن تفريغ محتوى كل عناصر input في النموذج.

ويمكن إستخدام JavaScript للقيام بنفس الأمر عند الضغط على أي زر، كالتالي:

<form id="myForm">
    <input type="text">
    <p id="clear">Clear</p>
</form>
<script>
clearBtn = document.getElementById('clear')
clearBtn.addEventListener('click', function () {
   document.getElementById('myForm').reset()
})
</script>

بهذا الشكل عند الضغط على العنصر p سوف يتم تتفريغ كامل النموذج، أو يمكنك أن تقوم بتفريغ عنصر input معين كالتالي:

<form id="myForm">
    <input type="text">
    <input type="text" id="clearMe">
    <p id="clear">Clear</p>
</form>


<script>
clearBtn = document.getElementById('clear')
myinput = document.getElementById('clearMe')
clearBtn.addEventListener('click', function () {
   myinput.value = ""
})
</script>

بهذا الشكل سوف يتم تفريغ عنصر input معين.