From 4a143c04038bf9a78a79c8e3f0e1e9d0b022f287 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 7 Feb 2014 09:10:50 -0800
Subject: [PATCH] CRM-13929 - Centralize and simplify radio clear widget

---
 CRM/Core/Form/Renderer.php                    | 27 +++++++++++++----
 css/civicrm.css                               | 12 ++++----
 js/Common.js                                  | 24 +++++----------
 templates/CRM/Activity/Form/Search.tpl        |  4 ---
 templates/CRM/Activity/Form/Search/Common.tpl |  9 ------
 .../CRM/Admin/Form/ScheduleReminders.tpl      |  5 ----
 templates/CRM/Badge/Form/Layout.js            | 29 ++++++++-----------
 templates/CRM/Badge/Form/Layout.tpl           | 10 +++----
 .../CRM/Campaign/Form/Petition/Block.tpl      |  9 +-----
 .../Contact/Form/Edit/Address/CustomField.tpl |  8 +----
 .../CRM/Contact/Form/Edit/Demographics.tpl    |  1 -
 .../CRM/Contact/Form/Inline/Demographics.tpl  |  4 +--
 .../Contact/Form/Search/Criteria/Basic.tpl    |  6 ++--
 .../Form/Search/Criteria/ChangeLog.tpl        |  4 ---
 .../Form/Search/Criteria/Demographics.tpl     |  3 +-
 .../Form/AdditionalInfo/Honoree.tpl           |  3 +-
 .../Form/ContributionPage/Amount.tpl          |  2 +-
 .../CRM/Contribute/Form/Search/Common.tpl     | 21 --------------
 templates/CRM/Contribute/Form/SoftCredit.tpl  |  1 -
 .../CRM/Contribute/Form/Task/PDFLetter.tpl    |  2 +-
 templates/CRM/Custom/Form/CustomField.tpl     |  7 +----
 templates/CRM/Custom/Form/Preview.tpl         |  8 +----
 templates/CRM/Custom/Form/Search.tpl          |  9 +-----
 .../Cart/Form/Checkout/ConferenceEvents.tpl   |  1 -
 .../CRM/Event/Cart/Form/Checkout/Payment.tpl  |  1 -
 templates/CRM/Event/Form/ManageEvent/Fee.tpl  |  2 +-
 templates/CRM/Event/Form/Search/Common.tpl    |  6 ----
 templates/CRM/Form/attachment.tpl             |  4 +--
 templates/CRM/Mailing/Form/Search.tpl         | 19 +++---------
 templates/CRM/Mailing/Form/Search/Common.tpl  | 12 --------
 templates/CRM/Member/Form/MembershipBlock.tpl |  2 +-
 templates/CRM/Member/Form/Search/Common.tpl   | 16 ----------
 templates/CRM/Pledge/Form/Search/Common.tpl   |  2 +-
 templates/CRM/Profile/Form/Dynamic.tpl        |  8 +----
 templates/CRM/Profile/Form/Search.tpl         |  7 +----
 templates/CRM/UF/Form/Block.tpl               |  9 +-----
 templates/CRM/UF/Form/Preview.tpl             |  7 +----
 templates/CRM/common/jcalendar.tpl            |  2 +-
 .../templates/CRM/Profile/Form/15/Edit.tpl    |  8 +----
 .../CRM/Profile/Form/Survey/Edit.tpl          |  8 +----
 40 files changed, 80 insertions(+), 242 deletions(-)

diff --git a/CRM/Core/Form/Renderer.php b/CRM/Core/Form/Renderer.php
index 0f86236723..ad22dd4d66 100644
--- a/CRM/Core/Form/Renderer.php
+++ b/CRM/Core/Form/Renderer.php
@@ -117,16 +117,23 @@ class CRM_Core_Form_Renderer extends HTML_QuickForm_Renderer_ArraySmarty {
       }
     }
 
-    if ($element->getType() == 'select' && $element->getAttribute('data-option-group-url')) {
-      $this->addOptionsEditLink($el, $element);
-    }
-
+    // Display-only (frozen) elements
     if (!empty($el['frozen'])) {
       if ($element->getAttribute('data-api-params') && $element->getAttribute('data-entity-value')) {
         $this->renderFrozenEntityRef($el, $element);
       }
       $el['html'] = '<div class="crm-frozen-field">' . $el['html'] . '</div>';
     }
+    // Active form elements
+    else {
+      if ($element->getType() == 'select' && $element->getAttribute('data-option-group-url')) {
+        $this->addOptionsEditLink($el, $element);
+      }
+
+      if ($element->getType() == 'group' && strpos($el['html'], 'crm-form-radio')) {
+        $this->appendUnselectButton($el, $element);
+      }
+    }
 
     return $el;
   }
@@ -217,6 +224,16 @@ class CRM_Core_Form_Renderer extends HTML_QuickForm_Renderer_ArraySmarty {
       $el['html'] .= ' <a href="#" class="crm-edit-optionvalue-link crm-hover-button" title="' . ts('Edit Options') . '" data-option-group-url="' . $field->getAttribute('data-option-group-url') . '"><span class="icon edit-icon"></span></a>';
     }
   }
+
+  /**
+   * @param array $el
+   * @param HTML_QuickForm_element $field
+   */
+  function appendUnselectButton(&$el, $field) {
+    // Initially hide if not needed
+    // Note: visibility:hidden prevents layout jumping around unlike display:none
+    $display = $field->getValue() ? '' : ' style="visibility:hidden;"';
+    $el['html'] .= ' <a href="#" class="crm-hover-button crm-clear-link"' . $display . ' title="' . ts('Clear') . '"><span class="icon close-icon"></span></a>';
+  }
 }
-// end CRM_Core_Form_Renderer
 
diff --git a/css/civicrm.css b/css/civicrm.css
index 6594ffdd25..c1c77a7279 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -796,8 +796,7 @@ div.crm-container fieldset label{
  */
 
 /* Inline form field 'post-help' and radio-button unselect */
-.crm-container .description,
-.crm-container .crm-clear-link {
+.crm-container .description {
   font-size: 0.9em;
   font-weight: normal;
   white-space: normal;
@@ -2212,10 +2211,6 @@ div.grippie {
   margin-left: 8px;
 }
 
-.crm-container .crm-clear-link {
-  margin-left: .5em;
-}
-
 #crm-container .crm-button {
   border: medium none;
   cursor: pointer;
@@ -2551,7 +2546,9 @@ div.grippie {
 .crm-container .play-icon {
   background-position: -3px -161px;
 }
-
+.crm-container .close-icon {
+  background-position: -82px -130px;
+}
 .crm-container .swap-icon {
   background-position: -82px -81px;
 }
@@ -2625,6 +2622,7 @@ div.grippie {
 /* Icon hover-buttons */
 .crm-container .crm-hover-button {
   display: inline-block;
+  border: 1px solid transparent;
 }
 .crm-container .crm-hover-button:hover,
 .crm-container .crm-hover-button:active {
diff --git a/js/Common.js b/js/Common.js
index 27c9d767c5..38ccd44369 100644
--- a/js/Common.js
+++ b/js/Common.js
@@ -171,22 +171,6 @@ function showHideByValue(trigger_field_id, trigger_value, target_element_id, tar
   }
 }
 
-/**
- * reset all the radio buttons with a given name
- *
- * @param string fieldName
- * @param object form
- * @return null
- */
-function unselectRadio(fieldName, form) {
-  for (i = 0; i < document.forms[form].elements.length; i++) {
-    if (document.forms[form].elements[i].name == fieldName) {
-      document.forms[form].elements[i].checked = false;
-    }
-  }
-  return;
-}
-
 /**
  * Function to change button text and disable one it is clicked
  *
@@ -967,6 +951,14 @@ CRM.validate = CRM.validate || {
               });
           });
         return false;
+      })
+      // Handle clear button for form elements
+      .on('click', 'a.crm-clear-link', function() {
+        $(this).css({visibility: 'hidden'}).siblings('.crm-form-radio:checked').prop('checked', false).change();
+        return false;
+      })
+      .on('change', 'input.crm-form-radio:checked', function() {
+        $(this).siblings('.crm-clear-link').css({visibility: ''});
       });
     $().crmtooltip();
   });
diff --git a/templates/CRM/Activity/Form/Search.tpl b/templates/CRM/Activity/Form/Search.tpl
index 6932aada41..a2a53d55f7 100644
--- a/templates/CRM/Activity/Form/Search.tpl
+++ b/templates/CRM/Activity/Form/Search.tpl
@@ -104,9 +104,5 @@
       }
     }).change();
 
-    cj(".crm-clear-link").click(function () {
-      cj('.description .contact-name-option').hide();
-    });
-
   </script>
 {/literal}
diff --git a/templates/CRM/Activity/Form/Search/Common.tpl b/templates/CRM/Activity/Form/Search/Common.tpl
index 15d3e60550..5050dd49c5 100644
--- a/templates/CRM/Activity/Form/Search/Common.tpl
+++ b/templates/CRM/Activity/Form/Search/Common.tpl
@@ -26,12 +26,6 @@
 <tr>
   <td colspan="2">
     {$form.activity_role.html}
-    <span class="crm-clear-link">
-      (<a href="#" title="unselect"
-          onclick="unselectRadio('activity_role', '{$form.formName}');
-            return false;">
-        {ts}clear{/ts}
-      </a>)
     </span>
   </td>
 </tr>
@@ -103,9 +97,6 @@
   <td colspan="2">
     {$form.activity_test.label} {help id="is-test" file="CRM/Contact/Form/Search/Advanced"}
     &nbsp; {$form.activity_test.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('activity_test','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-    </span>
   </td>
 </tr>
 {if $buildSurveyResult }
diff --git a/templates/CRM/Admin/Form/ScheduleReminders.tpl b/templates/CRM/Admin/Form/ScheduleReminders.tpl
index 4f066f0ae5..d8ac88aa56 100644
--- a/templates/CRM/Admin/Form/ScheduleReminders.tpl
+++ b/templates/CRM/Admin/Form/ScheduleReminders.tpl
@@ -197,11 +197,6 @@
         }
     });
 
-    cj('#absolute_date_display').parent( ).children('.crm-clear-link').children('a').click( function() {
-        cj('#relativeDate').show();
-        cj('#relativeDateRepeat').show();
-    });
-
     cj(function() {
         if (cj('#absolute_date_display').val()) {
             cj('#relativeDate').hide();
diff --git a/templates/CRM/Badge/Form/Layout.js b/templates/CRM/Badge/Form/Layout.js
index 183331393f..3398ba757d 100644
--- a/templates/CRM/Badge/Form/Layout.js
+++ b/templates/CRM/Badge/Form/Layout.js
@@ -1,24 +1,19 @@
 // http://civicrm.org/licensing
 cj(function ($) {
   function openKCFinder(field) {
+    var field = $(this);
     window.KCFinder = {
       callBack: function(url) {
-        field.val(url);
+        field.val(url).change();
         // calculate the image default width, height 
         // and assign to respective fields
          var ajaxUrl = CRM.url('civicrm/ajax/rest', 'className=CRM_Badge_Page_AJAX&fnName=getImageProp&json=1&img=' + url);
-         $.ajax({
-          url: ajaxUrl,
-          async: false,
-          global: false,
-          dataType: "json",
-          success: function ( response ) {
+         $.getJSON(ajaxUrl).done(function ( response ) {
             var widthId = 'width_' + field.attr('id');
             var heightId = 'height_' + field.attr('id');
             $('#' + widthId).val(response.width.toFixed(0));
             $('#' + heightId).val(response.height.toFixed(0));
-          }
-        }); 
+        });
         window.KCFinder = null;
       }
     };
@@ -29,15 +24,15 @@ cj(function ($) {
     );
   }
 
-  $('input[id^="image_"]').click(function(){
-    openKCFinder($(this));
-  });
+  $('input[id^="image_"]')
+    .click(openKCFinder)
+    .change(function() {
+      $(this).siblings('.clear-image').css({visibility: $(this).val() ? '' : 'hidden'});
+    })
+    .change();
 
-  $('.clear-image').click(function(){
-    var imgName = $(this).attr('imgname');
-    $('#' + imgName).val('');
-    $('#width_' + imgName).val('');
-    $('#height_' + imgName).val('');
+  $('.clear-image').click(function() {
+    $(this).closest('tr').find('input[type=text]').val('').change();
     return false;
   });
 });
diff --git a/templates/CRM/Badge/Form/Layout.tpl b/templates/CRM/Badge/Form/Layout.tpl
index cd3269b247..50a6eba02b 100644
--- a/templates/CRM/Badge/Form/Layout.tpl
+++ b/templates/CRM/Badge/Form/Layout.tpl
@@ -52,9 +52,8 @@
          <table>
            <tr>
             <td>{$form.image_1.html}
-             <span class="crm-clear-link">
-               (<a href="#" class="clear-image" imgname='image_1'>{ts}clear{/ts}</a>)
-             </span><br/>
+               <a href="#" class="crm-hover-button clear-image" title="{ts}Clear{/ts}"><span class="icon close-icon"></span></a>
+             <br/>
              <span class="description">{ts}Click above and select a file by double clicking on it.{/ts}</span>
             </td>
             <td>
@@ -73,9 +72,8 @@
          <table>
           <tr>
            <td>{$form.image_2.html}
-            <span class="crm-clear-link">
-              (<a href="#" class="clear-image" imgname='image_2'>{ts}clear{/ts}</a>)
-            </span><br/>
+              <a href="#" class="crm-hover-button clear-image" title="{ts}Clear{/ts}"><span class="icon close-icon"></span></a>
+            <br/>
             <span class="description">{ts}Click above and select a file by double clicking on it.{/ts}</span>
            </td>
            <td>
diff --git a/templates/CRM/Campaign/Form/Petition/Block.tpl b/templates/CRM/Campaign/Form/Petition/Block.tpl
index 3937e75849..ccc528f8d0 100644
--- a/templates/CRM/Campaign/Form/Petition/Block.tpl
+++ b/templates/CRM/Campaign/Form/Petition/Block.tpl
@@ -111,16 +111,9 @@
                       {include file="CRM/common/jcalendar.tpl" elementName=$n}
             {else}
                {$form.$n.html}
-               {if $n eq 'gender' && $form.$fieldName.frozen neq true}
-                  <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}');return false;">{ts}clear{/ts}</a>)</span>
-               {/if}
              {/if}
              {*CRM-4564*}
-             {if $field.html_type eq 'Radio' && $form.$fieldName.frozen neq true && $field.is_required neq 1}
-                 <span style="line-height: .75em; margin-top: 1px;">
-                  <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}');return false;">{ts}clear{/ts}</a>)</span>
-                 </span>
-             {elseif $field.html_type eq 'Autocomplete-Select'}
+             {if $field.html_type eq 'Autocomplete-Select'}
            {if $field.data_type eq 'ContactReference'}
                      {include file="CRM/Custom/Form/ContactReference.tpl" element_name = $n}
                  {else}
diff --git a/templates/CRM/Contact/Form/Edit/Address/CustomField.tpl b/templates/CRM/Contact/Form/Edit/Address/CustomField.tpl
index 07f2c19083..4ce81755cf 100644
--- a/templates/CRM/Contact/Form/Edit/Address/CustomField.tpl
+++ b/templates/CRM/Contact/Form/Edit/Address/CustomField.tpl
@@ -54,9 +54,6 @@
                                 {/if}
                             {/if}
                         {/foreach}
-                        {if $element.html_type eq 'Radio'}
-                            <td><span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;" >{ts}clear{/ts}</a>)</span></td>
-                        {/if}
                     </tr>
                 </table>
             </td>
@@ -78,10 +75,7 @@
                     {include file="CRM/common/jcalendar.tpl" blockId=$blockId blockSection='address' elementName=$element_name}
                 {/if}
 
-                {if $element.html_type eq 'Radio'}
-                    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('address[{$blockId}][{$element_name}]', '{$form.formName}'); return false;" >{ts}clear{/ts}</a>)</span>
-
-                {elseif $element.data_type eq 'File'}
+                {if $element.data_type eq 'File'}
                     {if $element.element_value.data}
                         <span class="html-adjust"><br />
                             &nbsp;{ts}Attached File{/ts}: &nbsp;
diff --git a/templates/CRM/Contact/Form/Edit/Demographics.tpl b/templates/CRM/Contact/Form/Edit/Demographics.tpl
index e28f62698e..e8ff3c878a 100644
--- a/templates/CRM/Contact/Form/Edit/Demographics.tpl
+++ b/templates/CRM/Contact/Form/Edit/Demographics.tpl
@@ -33,7 +33,6 @@
 
   <span class="value">
         {$form.gender_id.html}
-        <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('gender_id', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
         </span>
   </div>
   <div class="form-item">
diff --git a/templates/CRM/Contact/Form/Inline/Demographics.tpl b/templates/CRM/Contact/Form/Inline/Demographics.tpl
index f15074e9b7..88799399b1 100644
--- a/templates/CRM/Contact/Form/Inline/Demographics.tpl
+++ b/templates/CRM/Contact/Form/Inline/Demographics.tpl
@@ -32,9 +32,7 @@
   <div class="crm-clear">
     <div class="crm-summary-row">
       <div class="crm-label">{$form.gender_id.label}</div>
-      <div class="crm-content">{$form.gender_id.html}
-        <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('gender_id', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-      </div>
+      <div class="crm-content">{$form.gender_id.html}</div>
     </div>
     <div class="crm-summary-row">
       <div class="crm-label">{$form.birth_date.label}</div>
diff --git a/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl b/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl
index 40b25281a0..e05611ea44 100644
--- a/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl
+++ b/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl
@@ -66,11 +66,11 @@
   {/if}
   {if $form.group}
     <td>
-      <div id='groupselect'><label>{ts}Group(s){/ts}<span class="crm-clear-link">(<a id='searchbygrouptype'>{ts}search by group type{/ts}</a>)</span></label>
+      <div id='groupselect'><label>{ts}Group(s){/ts} <span class="description">(<a id='searchbygrouptype'>{ts}search by group type{/ts}</a>)</span></label>
         {$form.group.html}
     </div>
     <div id='grouptypeselect'>
-      <label>{ts}Group Type(s){/ts}<span class="crm-clear-link"> ( <a id='searchbygroup'>{ts}search by group{/ts}</a>)</span></label>
+      <label>{ts}Group Type(s){/ts} <span class="description"> (<a id='searchbygroup'>{ts}search by group{/ts}</a>)</span></label>
       {$form.group_type.html}
         {literal}
         <script type="text/javascript">
@@ -191,7 +191,7 @@
     </td>
     <td>
       {if $form.uf_user}
-          {$form.uf_user.label} {$form.uf_user.html} <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('uf_user', 'Advanced'); return false;" >{ts}clear{/ts}</a>)</span>
+          {$form.uf_user.label} {$form.uf_user.html}
           <div class="description font-italic">
               {ts 1=$config->userFramework}Does the contact have a %1 Account?{/ts}
           </div>
diff --git a/templates/CRM/Contact/Form/Search/Criteria/ChangeLog.tpl b/templates/CRM/Contact/Form/Search/Criteria/ChangeLog.tpl
index d441ccd98e..5f4dfce376 100644
--- a/templates/CRM/Contact/Form/Search/Criteria/ChangeLog.tpl
+++ b/templates/CRM/Contact/Form/Search/Criteria/ChangeLog.tpl
@@ -34,10 +34,6 @@
       </td>
       <td width="100%">
         {$form.log_date.html}
-        <span class="crm-clear-link">(<a href="#" title="unselect"
-                                         onclick="unselectRadio('log_date', '{$form.formName}');
-                                           return false;">{ts}clear{/ts}</a>)
-        </span>
         <br/>
       </td>
     </tr>
diff --git a/templates/CRM/Contact/Form/Search/Criteria/Demographics.tpl b/templates/CRM/Contact/Form/Search/Criteria/Demographics.tpl
index 23e9917072..bd5f820770 100644
--- a/templates/CRM/Contact/Form/Search/Criteria/Demographics.tpl
+++ b/templates/CRM/Contact/Form/Search/Criteria/Demographics.tpl
@@ -33,7 +33,6 @@
    <td>
             {$form.is_deceased.label}<br />
            {$form.is_deceased.html}
-             <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('is_deceased', 'Advanced'); return false;" >{ts}clear{/ts}</a>)</span>
          </td>
       </tr>
       <tr>
@@ -43,7 +42,7 @@
       <tr>
          <td>
             {$form.gender_id.label}<br />
-            {$form.gender_id.html}<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('gender_id', 'Advanced'); return false;" >{ts}clear{/ts}</a>)</span>
+            {$form.gender_id.html}
          </td>
       </tr>
     </table>
diff --git a/templates/CRM/Contribute/Form/AdditionalInfo/Honoree.tpl b/templates/CRM/Contribute/Form/AdditionalInfo/Honoree.tpl
index fefe07bd63..40c0555b68 100644
--- a/templates/CRM/Contribute/Form/AdditionalInfo/Honoree.tpl
+++ b/templates/CRM/Contribute/Form/AdditionalInfo/Honoree.tpl
@@ -29,8 +29,7 @@
          {if $form.honor_type_id.html}
       <tr class="crm-contribution-form-block-honor_type_id">
          <td colspan="3">
-      {$form.honor_type_id.html}
-      <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('honor_type_id', '{$form.formName}'); enableHonorType(); return false;">{ts}clear{/ts}</a>)</span><br />
+      {$form.honor_type_id.html}<br />
       <span class="description">{ts}Select an option to reveal honoree information fields.{/ts}</span>
          </td>
       </tr>
diff --git a/templates/CRM/Contribute/Form/ContributionPage/Amount.tpl b/templates/CRM/Contribute/Form/ContributionPage/Amount.tpl
index 6c0756841c..f9918e5b42 100644
--- a/templates/CRM/Contribute/Form/ContributionPage/Amount.tpl
+++ b/templates/CRM/Contribute/Form/ContributionPage/Amount.tpl
@@ -180,7 +180,7 @@
                 <fieldset><legend>{ts}Fixed Contribution Options{/ts}</legend>
                     {ts}Use the table below to enter up to ten fixed contribution amounts. These will be presented as a list of radio button options. Both the label and dollar amount will be displayed.{/ts}{if $isQuick}{ts} Click <a id='quickconfig' href='#'>here</a> if you want to configure the Fixed Contribution Options below as part of a Price Set, with the added flexibility and complexity that entails.{/ts}{/if}<br />
                     <table id="map-field-table">
-                        <tr class="columnheader" ><th scope="column">{ts}Contribution Label{/ts}</th><th scope="column">{ts}Amount{/ts}</th><th scope="column">{ts}Default?{/ts}<br /><span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('default', 'Amount'); return false;" >{ts}clear{/ts}</a>)</span></th></tr>
+                        <tr class="columnheader" ><th scope="column">{ts}Contribution Label{/ts}</th><th scope="column">{ts}Amount{/ts}</th><th scope="column">{ts}Default?{/ts}<br /></th></tr>
                         {section name=loop start=1 loop=11}
                             {assign var=idx value=$smarty.section.loop.index}
                             <tr><td class="even-row">{$form.label.$idx.html}</td><td>{$form.value.$idx.html|crmMoney}</td><td class="even-row">{$form.default.$idx.html}</td></tr>
diff --git a/templates/CRM/Contribute/Form/Search/Common.tpl b/templates/CRM/Contribute/Form/Search/Common.tpl
index 72a152621c..2bee33855d 100644
--- a/templates/CRM/Contribute/Form/Search/Common.tpl
+++ b/templates/CRM/Contribute/Form/Search/Common.tpl
@@ -61,30 +61,18 @@
         <td>{$form.contribution_thankyou_date_is_not_null.label}</td>
         <td>
           {$form.contribution_thankyou_date_is_not_null.html}
-          <span class="crm-clear-link">
-            (<a href="#" onclick="unselectRadio('contribution_thankyou_date_is_not_null','{$form.formName}')">
-            {ts}clear{/ts}</a>)
-          </span>
         </td>
       </tr>
       <tr>
         <td>{$form.contribution_receipt_date_is_not_null.label}</td>
         <td>
           {$form.contribution_receipt_date_is_not_null.html}
-          <span class="crm-clear-link">
-            (<a href="#" onclick="unselectRadio('contribution_receipt_date_is_not_null','{$form.formName}')">
-            {ts}clear{/ts}</a>)
-          </span>
         </td>
       </tr>
       <tr>
         <td>{$form.contribution_test.label} {help id="is-test" file="CRM/Contact/Form/Search/Advanced"}</td>
         <td>
           {$form.contribution_test.html}
-          <span class="crm-clear-link">
-            (<a href="#" onclick="unselectRadio('contribution_test','{$form.formName}')">
-            {ts}clear{/ts}</a>)
-          </span>
         </td>
       </tr>
       </tbody>
@@ -97,18 +85,12 @@
         <td>{$form.contribution_pay_later.label}</td>
         <td>
           {$form.contribution_pay_later.html}
-            <span class="crm-clear-link">
-              (<a href="#" onclick="unselectRadio('contribution_pay_later','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-            </span>
         </td>
       </tr>
       <tr>
         <td>{$form.contribution_recurring.label}</td>
         <td>
           {$form.contribution_recurring.html}
-            <span class="crm-clear-link">
-              (<a href="#" onclick="unselectRadio('contribution_recurring','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-            </span>
         </td>
       </tr>
       </tbody>
@@ -143,9 +125,6 @@
   <td>
     {$form.contribution_pcp_display_in_roll.label}
     {$form.contribution_pcp_display_in_roll.html}
-      <span class="crm-clear-link">
-        (<a href="#" onclick="unselectRadio('contribution_pcp_display_in_roll','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-      </span>
   </td>
 </tr>
 
diff --git a/templates/CRM/Contribute/Form/SoftCredit.tpl b/templates/CRM/Contribute/Form/SoftCredit.tpl
index 91eb2b7730..39051f2681 100644
--- a/templates/CRM/Contribute/Form/SoftCredit.tpl
+++ b/templates/CRM/Contribute/Form/SoftCredit.tpl
@@ -34,7 +34,6 @@
       <div class="crm-section {$form.soft_credit_type_id.name}-section">
         <div class="content" >
           {$form.soft_credit_type_id.html}
-          <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('soft_credit_type_id', '{$form.formName}');enableHonorType(); return false;">{ts}clear{/ts}</a>)</span>
           <div class="description">{ts}Select an option to reveal honoree information fields.{/ts}</div>
         </div>
       </div>
diff --git a/templates/CRM/Contribute/Form/Task/PDFLetter.tpl b/templates/CRM/Contribute/Form/Task/PDFLetter.tpl
index 5016c704ab..031539bb27 100644
--- a/templates/CRM/Contribute/Form/Task/PDFLetter.tpl
+++ b/templates/CRM/Contribute/Form/Task/PDFLetter.tpl
@@ -37,7 +37,7 @@
     <table class="form-layout-compressed">
       <tr><td class="label-left">{$form.thankyou_update.html} {$form.thankyou_update.label}</td><td></td></tr>
       <tr><td class="label-left">{$form.receipt_update.html} {$form.receipt_update.label}</td><td></td></tr>
-      <!--tr><td class="label-left">{$form.is_group_by.label} (<a href="#" title="unselect" onclick="unselectRadio('is_group_by'); return false;" >{ts}clear{/ts}</a>)</td><td>{$form.is_group_by.html}</td></tr-->
+      <!--tr><td class="label-left">{$form.is_group_by.label}</td><td>{$form.is_group_by.html}</td></tr-->
     </table>
   </div><!-- /.crm-accordion-body -->
 </div><!-- /.crm-accordion-wrapper -->
diff --git a/templates/CRM/Custom/Form/CustomField.tpl b/templates/CRM/Custom/Form/CustomField.tpl
index d4e3d3046a..9bb38a4092 100644
--- a/templates/CRM/Custom/Form/CustomField.tpl
+++ b/templates/CRM/Custom/Form/CustomField.tpl
@@ -54,9 +54,6 @@
                                 {/if}
                             {/if}
                         {/foreach}
-                        {if $element.html_type eq 'Radio' and $element.is_view eq 0}
-                            <td><span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;" >{ts}clear{/ts}</a>)</span></td>
-                        {/if}
                     </tr>
                 </table>
             </td>
@@ -72,9 +69,7 @@
                     {include file="CRM/common/jcalendar.tpl" elementName=$element_name}
                 {/if}
 
-                {if $element.html_type eq 'Radio' and $element.is_view eq 0}
-                    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;" >{ts}clear{/ts}</a>)</span>
-                {elseif $element.data_type eq 'File'}
+                {if $element.data_type eq 'File'}
                     {if $element.element_value.data}
                       <div id="attachStatusMesg_{$element_name}" class="status hiddenElement"></div>
                       <div id="attachFile_{$element_name}">
diff --git a/templates/CRM/Custom/Form/Preview.tpl b/templates/CRM/Custom/Form/Preview.tpl
index 5aff212dcf..219d936e27 100644
--- a/templates/CRM/Custom/Form/Preview.tpl
+++ b/templates/CRM/Custom/Form/Preview.tpl
@@ -73,10 +73,6 @@
                             {/if}
                          {/if}
                     {/foreach}
-        {if $element.html_type eq 'Radio'}
-                 <tr>
-                 <td><span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;" >{ts}clear{/ts}</a>)</span></td>
-               {/if}
                  </tr>
                 </table>
          </td>
@@ -93,9 +89,7 @@
         {elseif $element.skip_calendar NEQ true }
             {include file="CRM/common/jcalendar.tpl" elementName=$element_name}
         {/if}
-      {if $element.html_type eq 'Radio'}
-        <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;" >{ts}clear{/ts}</a>)</span>
-      {elseif $element.html_type eq 'Autocomplete-Select'}
+      {if $element.html_type eq 'Autocomplete-Select'}
           {if $element.data_type eq 'ContactReference'}
                   {include file="CRM/Custom/Form/ContactReference.tpl"}
                 {else}
diff --git a/templates/CRM/Custom/Form/Search.tpl b/templates/CRM/Custom/Form/Search.tpl
index 4b2f8bf573..7ba22e63fa 100644
--- a/templates/CRM/Custom/Form/Search.tpl
+++ b/templates/CRM/Custom/Form/Search.tpl
@@ -65,11 +65,6 @@
                 {/if}
                 {/foreach}
              </tr>
-            {if $element.html_type eq 'Radio'}
-                <tr style="line-height: .75em; margin-top: 1px;">
-                    <td> <span class="crm-clear-link">(<a href="#" title="{ts}unselect{/ts}" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span></td>
-                </tr>
-            {/if}
             </table>
             {/strip}
            </td>
@@ -99,9 +94,7 @@
                     {include file="CRM/common/jcalendar.tpl" elementName=$element_name}
                 {/if}
             {/if}
-            {if $element.html_type eq 'Radio'}
-                &nbsp; <span class="crm-clear-link">(<a href="#" title="{ts}unselect{/ts}" onclick="unselectRadio('{$element_name}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-            {elseif $element.html_type eq 'Autocomplete-Select'}
+            {if $element.html_type eq 'Autocomplete-Select'}
                 {if $element.data_type eq 'ContactReference'}
                     {include file="CRM/Custom/Form/ContactReference.tpl"}
                 {else}
diff --git a/templates/CRM/Event/Cart/Form/Checkout/ConferenceEvents.tpl b/templates/CRM/Event/Cart/Form/Checkout/ConferenceEvents.tpl
index f347b381a6..7b759d9637 100644
--- a/templates/CRM/Event/Cart/Form/Checkout/ConferenceEvents.tpl
+++ b/templates/CRM/Event/Cart/Form/Checkout/ConferenceEvents.tpl
@@ -12,7 +12,6 @@
     <div class="slot_options">
       <ul class="indented">
         {$form.$field_name.html}
-        <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$field_name}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
       </ul>
     </div>
   </fieldset>
diff --git a/templates/CRM/Event/Cart/Form/Checkout/Payment.tpl b/templates/CRM/Event/Cart/Form/Checkout/Payment.tpl
index cca4692f7f..81a7a4aa7d 100644
--- a/templates/CRM/Event/Cart/Form/Checkout/Payment.tpl
+++ b/templates/CRM/Event/Cart/Form/Checkout/Payment.tpl
@@ -134,7 +134,6 @@
 <div class="crm-section {$form.payment_type.name}-section">
   <div class="label">{$form.payment_type.label}</div>
   <div class="content">{$form.payment_type.html}
-    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('payment_type', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
   </div>
   <div class="clear"></div>
 </div>
diff --git a/templates/CRM/Event/Form/ManageEvent/Fee.tpl b/templates/CRM/Event/Form/ManageEvent/Fee.tpl
index 48503ca9c2..0a99dcb6b0 100644
--- a/templates/CRM/Event/Form/ManageEvent/Fee.tpl
+++ b/templates/CRM/Event/Form/ManageEvent/Fee.tpl
@@ -154,7 +154,7 @@
         {ts}Use the table below to enter descriptive labels and amounts for up to ten event fee levels. These will be presented as a list of radio button options. Both the label and dollar amount will be displayed. You can also configure one or more sets of discounted fees by checking "Discounts by Signup Date" below.{/ts}<br />
   {if $isQuick}{ts}Click <a id='quickconfig' href='#'>here</a> if you want to configure the Regular Fees below as part of a Price Set, with the added flexibility and complexity that entails.{/ts}{/if}
         <table id="map-field-table">
-        <tr class="columnheader"><td scope="column">{ts}Fee Label{/ts}</td><td scope="column">{ts}Amount{/ts}</td><td scope="column">{ts}Default?{/ts}<br /><span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('default', 'Fee'); return false;" >{ts}clear{/ts}</a>)</span></td></tr>
+        <tr class="columnheader"><td scope="column">{ts}Fee Label{/ts}</td><td scope="column">{ts}Amount{/ts}</td><td scope="column">{ts}Default?{/ts}<br /></td></tr>
         {section name=loop start=1 loop=11}
            {assign var=idx value=$smarty.section.loop.index}
            <tr><td class="even-row crm-event-manage-fee-form-block-label_{$idx}">{$form.label.$idx.html}</td><td class="crm-event-manage-fee-form-block-value_{$idx}">{$form.value.$idx.html|crmMoney}</td><td class="even-row crm-event-manage-fee-form-block-default_{$idx}">{$form.default.$idx.html}</td></tr>
diff --git a/templates/CRM/Event/Form/Search/Common.tpl b/templates/CRM/Event/Form/Search/Common.tpl
index 7d4994f0d3..d60220f30a 100644
--- a/templates/CRM/Event/Form/Search/Common.tpl
+++ b/templates/CRM/Event/Form/Search/Common.tpl
@@ -59,15 +59,9 @@
   <td class="crm-event-form-block-participant_test">
   {$form.participant_test.label} {help id="is-test" file="CRM/Contact/Form/Search/Advanced"}
     &nbsp; {$form.participant_test.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('participant_test','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-    </span>
   </td>
   <td class="crm-event-form-block-participant_pay_later">
   {$form.participant_pay_later.label} {$form.participant_pay_later.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('participant_pay_later','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-    </span>
   </td>
 </tr>
 <tr>
diff --git a/templates/CRM/Form/attachment.tpl b/templates/CRM/Form/attachment.tpl
index 8b0c72cac5..a597de573c 100644
--- a/templates/CRM/Form/attachment.tpl
+++ b/templates/CRM/Form/attachment.tpl
@@ -63,7 +63,7 @@
         {/if}
         <tr>
           <td class="label">{$form.attachFile_1.label}</td>
-          <td>{$form.attachFile_1.html}&nbsp;{$form.attachDesc_1.html}<span class="crm-clear-link">(<a href="#" onclick="clearAttachment( '#attachFile_1', '#attachDesc_1' ); return false;">{ts}clear{/ts}</a>)</span><br />
+          <td>{$form.attachFile_1.html}&nbsp;{$form.attachDesc_1.html}<a href="#" class="crm-hover-button" title="{ts}Clear{/ts}" onclick="clearAttachment( '#attachFile_1', '#attachDesc_1' ); return false;"><span class="icon close-icon"></span></a><br />
             <span class="description">{ts}Browse to the <strong>file</strong> you want to upload.{/ts}{if $maxAttachments GT 1} {ts 1=$maxAttachments}You can have a maximum of %1 attachment(s).{/ts}{/if} Each file must be less than {$config->maxFileSize}M in size. You can also add a short description.</span>
           </td>
         </tr>
@@ -84,7 +84,7 @@
             <tr class="attachment-fieldset"><td colspan="2"></td></tr>
             <tr>
                 <td class="label">{$form.attachFile_1.label}</td>
-                <td>{$form.$attachName.html}&nbsp;{$form.$attachDesc.html}<span class="crm-clear-link">(<a href="#" onclick="clearAttachment( '#{$attachName}' ); return false;">{ts}clear{/ts}</a>)</span></td>
+                <td>{$form.$attachName.html}&nbsp;{$form.$attachDesc.html}<a href="#" class="crm-hover-button" title="{ts}Clear{/ts}" onclick="clearAttachment( '#{$attachName}' ); return false;"><span class="icon close-icon"></span></a></td>
             </tr>
             <tr>
               <td></td>
diff --git a/templates/CRM/Mailing/Form/Search.tpl b/templates/CRM/Mailing/Form/Search.tpl
index f7630c06f4..f669c2939d 100644
--- a/templates/CRM/Mailing/Form/Search.tpl
+++ b/templates/CRM/Mailing/Form/Search.tpl
@@ -45,7 +45,6 @@
             <div class="crm-search-form-block-is_archive">
             {$form.is_archived.label}<br/>
             {$form.is_archived.html}
-            <span class="crm-clear-link">(<a href="#r">{ts}clear{/ts}</a>)</span>
             </div>
         </td>
         {if $form.mailing_status}
@@ -80,28 +79,18 @@
     var archiveOption = cj("input[name^='is_archived']:radio");
     cj('#status_unscheduled').change(function() {
       if (cj(this).prop('checked') ) {
-        archiveOption.prop('checked',false);
-        archiveOption.attr('readonly',true);
+        archiveOption.prop({checked: false, disabled: true}).change();
       } else {
-        archiveOption.attr('readonly',false);
+        archiveOption.prop('disabled', false);
       }
     }).trigger('change');
     archiveOption.change(function() {
       if (cj("input[name^='is_archived']:radio:checked").length) {
-        disableDraft();
+        cj('#status_unscheduled').prop({checked: false, disabled: true}).change();
       } else {
-        cj('#status_unscheduled').attr('readonly',false); 
+        cj('#status_unscheduled').prop('disabled', false);
       }
     }).trigger('change');
-    cj(".crm-search-form-block-is_archive .crm-clear-link a").click(function() {
-      archiveOption.prop('checked',false);
-      cj('#status_unscheduled').attr('readonly',false); 
-    });
   });
-
-  function disableDraft() {
-    cj('#status_unscheduled').prop('checked',false);
-    cj('#status_unscheduled').attr('readonly',true); 
-  } 
 </script>
 {/literal}
diff --git a/templates/CRM/Mailing/Form/Search/Common.tpl b/templates/CRM/Mailing/Form/Search/Common.tpl
index 00db5d5d58..cb24ac6180 100644
--- a/templates/CRM/Mailing/Form/Search/Common.tpl
+++ b/templates/CRM/Mailing/Form/Search/Common.tpl
@@ -19,9 +19,6 @@
   {$form.mailing_delivery_status.label}
     <br />
   {$form.mailing_delivery_status.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('mailing_delivery_status','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-    </span>
   <br />
   {$form.mailing_bounce_types.label}
   {$form.mailing_bounce_types.html}
@@ -30,9 +27,6 @@
   {$form.mailing_open_status.label}
     <br />
   {$form.mailing_open_status.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('mailing_open_status','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-    </span>
   </td>
 </tr>
 <tr>
@@ -40,17 +34,11 @@
   {$form.mailing_click_status.label}
     <br />
   {$form.mailing_click_status.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('mailing_click_status','{$form.formName}'); return false;">{ts}clear{/ts}</a>)
-    </span>
   </td>
   <td>
   {$form.mailing_reply_status.label}
     <br />
   {$form.mailing_reply_status.html}
-    <span class="crm-clear-link">
-      (<a href="#" onclick="unselectRadio('mailing_reply_status','{$form.formName}')">{ts}clear{/ts}</a>)
-    </span>
   </td>
 </tr>
 <tr>
diff --git a/templates/CRM/Member/Form/MembershipBlock.tpl b/templates/CRM/Member/Form/MembershipBlock.tpl
index 88e0e7c1cc..947b601ab8 100644
--- a/templates/CRM/Member/Form/MembershipBlock.tpl
+++ b/templates/CRM/Member/Form/MembershipBlock.tpl
@@ -91,7 +91,7 @@
                 {strip}
                   <table class="report">
                     <tr class="columnheader" style="vertical-align:top;"><th style="border-right: 1px solid #4E82CF;">{ts}Include these membership types{/ts}</th><th{if $is_recur} style="border-right: 1px solid #4E82CF;"{/if}>{ts}Default{/ts}<br />
-                    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('membership_type_default', 'MembershipBlock'); return false;" >unselect</a>)</span></th>{if $is_recur}<th>{ts}Auto-renew{/ts}</th>{/if}</tr>
+                    </th>{if $is_recur}<th>{ts}Auto-renew{/ts}</th>{/if}</tr>
                       {assign var="index" value="1"}
                       {foreach name=outer key=key item=item from=$form.membership_type}
                         {if $index < 10}
diff --git a/templates/CRM/Member/Form/Search/Common.tpl b/templates/CRM/Member/Form/Search/Common.tpl
index 5ecac84a33..5d41ae1d89 100644
--- a/templates/CRM/Member/Form/Search/Common.tpl
+++ b/templates/CRM/Member/Form/Search/Common.tpl
@@ -50,10 +50,6 @@
     <br />{$form.member_source.html}
     <p>
     {$form.member_test.label} {help id="is-test" file="CRM/Contact/Form/Search/Advanced"} &nbsp;{$form.member_test.html}
-      <span class="crm-clear-link">
-        (<a href="#" title="unselect" onclick="unselectRadio('member_test', '{$form.formName}'); return false;" >
-        {ts}clear{/ts}</a>)
-      </span>
     </p>
   </td>
   <td>
@@ -61,24 +57,12 @@
     {$form.member_is_primary.label}
     {help id="id-member_is_primary" file="CRM/Member/Form/Search.hlp"}
     {$form.member_is_primary.html}
-      <span class="crm-clear-link">
-        (<a href="#" title="unselect" onclick="unselectRadio('member_is_primary', '{$form.formName}'); return false;" >
-        {ts}clear{/ts}</a>)
-      </span>
     </p>
     <p>
     {$form.member_pay_later.label}&nbsp;{$form.member_pay_later.html}
-      <span class="crm-clear-link">
-        (<a href="#" title="unselect" onclick="unselectRadio('member_pay_later', '{$form.formName}'); return false;" >
-        {ts}clear{/ts}</a>)
-      </span>
     </p>
     <p>
     {$form.member_auto_renew.label}&nbsp;{$form.member_auto_renew.html}
-      <span class="crm-clear-link">
-        (<a href="#" title="unselect" onclick="unselectRadio('member_auto_renew', '{$form.formName}'); return false;" >
-        {ts}clear{/ts}</a>)
-      </span>
     </p>
   </td>
 </tr>
diff --git a/templates/CRM/Pledge/Form/Search/Common.tpl b/templates/CRM/Pledge/Form/Search/Common.tpl
index 07e78649e7..9d3a8329a9 100644
--- a/templates/CRM/Pledge/Form/Search/Common.tpl
+++ b/templates/CRM/Pledge/Form/Search/Common.tpl
@@ -78,7 +78,7 @@
 <tr>
   <td>
   <br />
-  {$form.pledge_test.label} {help id="is-test" file="CRM/Contact/Form/Search/Advanced"} &nbsp; {$form.pledge_test.html} <span class="crm-clear-link">(<a href="#" onclick="unselectRadio('pledge_test','{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
+  {$form.pledge_test.label} {help id="is-test" file="CRM/Contact/Form/Search/Advanced"} &nbsp; {$form.pledge_test.html}
   </td>
 </tr>
 <tr>
diff --git a/templates/CRM/Profile/Form/Dynamic.tpl b/templates/CRM/Profile/Form/Dynamic.tpl
index 8ed3c3b7b7..75b97da33d 100644
--- a/templates/CRM/Profile/Form/Dynamic.tpl
+++ b/templates/CRM/Profile/Form/Dynamic.tpl
@@ -159,9 +159,6 @@ function checkResponse(responseText, statusText, xhr, $form) {
                   {/foreach}
                 </tr>
                 </table>
-                {if $field.html_type eq 'Radio' and $form.formName eq 'Edit' and $field.is_view neq 1 }
-                  &nbsp;<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-                {/if}
               {/strip}
             </div>
             <div class="clear"></div>
@@ -205,10 +202,7 @@ function checkResponse(responseText, statusText, xhr, $form) {
                 {else}
                   {$form.$n.html}
                 {/if}
-                {if (($n eq 'gender') or ($field.html_type eq 'Radio' and $form.formName eq 'Edit' and $field.is_required neq 1)) and
-                ($field.is_view neq 1)}
-                  &nbsp;<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-                  {elseif $field.html_type eq 'Autocomplete-Select'}
+                {if $field.html_type eq 'Autocomplete-Select'}
                   {if $field.data_type eq 'ContactReference'}
                     {include file="CRM/Custom/Form/ContactReference.tpl" element_name = $n}
                   {else}
diff --git a/templates/CRM/Profile/Form/Search.tpl b/templates/CRM/Profile/Form/Search.tpl
index 6143ca7917..f9605b3430 100644
--- a/templates/CRM/Profile/Form/Search.tpl
+++ b/templates/CRM/Profile/Form/Search.tpl
@@ -87,9 +87,6 @@
                 {/foreach}
               </tr>
               </table>
-              {if $field.html_type eq 'Radio' and $form.formName eq 'Search'}
-                <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-              {/if}
             {/strip}
           </td>
         </tr>
@@ -122,9 +119,7 @@
               {else}
                 {$form.$n.html}
               {/if}
-              {if ($n eq 'gender') or ($field.html_type eq 'Radio' and $form.formName eq 'Search')}
-                <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-              {elseif $field.html_type eq 'Autocomplete-Select'}
+              {if $field.html_type eq 'Autocomplete-Select'}
                 {if $field.data_type eq 'ContactReference'}
                   {include file="CRM/Custom/Form/ContactReference.tpl" element_name = $n}
                 {else}
diff --git a/templates/CRM/UF/Form/Block.tpl b/templates/CRM/UF/Form/Block.tpl
index a789951303..3c93b82d97 100644
--- a/templates/CRM/UF/Form/Block.tpl
+++ b/templates/CRM/UF/Form/Block.tpl
@@ -131,17 +131,10 @@
                 {/if}
               {else}
                 {if $prefix}{$form.$prefix.$n.html}{else}{$form.$n.html}{/if}
-                {if $n eq 'gender' && $form.$fieldName.frozen neq true}
-                  <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}');return false;">{ts}clear{/ts}</a>)</span>
-                {/if}
               {/if}
 
             {*CRM-4564*}
-              {if $field.html_type eq 'Radio' && $form.$fieldName.frozen neq true && $field.is_required neq 1}
-                <span style="line-height: .75em; margin-top: 1px;">
-                    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}');return false;">{ts}clear{/ts}</a>)</span>
-                   </span>
-              {elseif $field.html_type eq 'Autocomplete-Select'}
+              {if $field.html_type eq 'Autocomplete-Select'}
                 {if $field.data_type eq 'ContactReference'}
                 {include file="CRM/Custom/Form/ContactReference.tpl" element_name = $n}
                 {else}
diff --git a/templates/CRM/UF/Form/Preview.tpl b/templates/CRM/UF/Form/Preview.tpl
index aa94a78ecc..9d47362840 100644
--- a/templates/CRM/UF/Form/Preview.tpl
+++ b/templates/CRM/UF/Form/Preview.tpl
@@ -97,9 +97,6 @@
                       {/if}
                     {/foreach}
                   </table>
-                  {if $field.html_type eq 'Radio' and $form.formName eq 'Preview'}
-                    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-                  {/if}
                 {/strip}
               </td>
             </tr>
@@ -132,9 +129,7 @@
                 {/if}
                 {$form.$n.html}
                 {if $field.is_view eq 0}
-                  {if ( $field.html_type eq 'Radio' or  $n eq 'gender') and $form.formName eq 'Preview'}
-                    <span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-                  {elseif $field.html_type eq 'Autocomplete-Select'}
+                  {if $field.html_type eq 'Autocomplete-Select'}
                     {if $field.data_type eq 'ContactReference'}
                     {include file="CRM/Custom/Form/ContactReference.tpl" element_name = $n}
                       {else}
diff --git a/templates/CRM/common/jcalendar.tpl b/templates/CRM/common/jcalendar.tpl
index 98b67ed168..3e21f188c3 100644
--- a/templates/CRM/common/jcalendar.tpl
+++ b/templates/CRM/common/jcalendar.tpl
@@ -64,7 +64,7 @@
 {/if}
 
 {if $action neq 1028}
-    <span class="crm-clear-link">(<a href="#" onclick="clearDateTime( '{$elementId}' ); return false;">{ts}clear{/ts}</a>)</span>
+    <a href="#" class="crm-hover-button" title="{ts}Clear{/ts}" onclick="clearDateTime( '{$elementId}' ); return false;"><span class="icon close-icon"></span></a>
 {/if}
 
 <script type="text/javascript">
diff --git a/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/15/Edit.tpl b/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/15/Edit.tpl
index 4d14f86413..4c0f11d987 100644
--- a/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/15/Edit.tpl
+++ b/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/15/Edit.tpl
@@ -126,9 +126,6 @@
                           {/foreach}
                         </tr>
                         </table>
-                    	{if $field.html_type eq 'Radio' and $form.formName eq 'Edit' and $field.is_view neq 1 }
-                               &nbsp;<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-                    	{/if}
                         {/strip}
                     </div>
                     <div class="clear"></div>
@@ -164,10 +161,7 @@
                		       {else}       
                               {$form.$n.html}
                            {/if}
-                           {if (($n eq 'gender') or ($field.html_type eq 'Radio' and $form.formName eq 'Edit' and $field.is_required neq 1)) and
-            	       	   ($field.is_view neq 1)}
-                                   &nbsp;<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-            		       {elseif $field.html_type eq 'Autocomplete-Select'}
+            		       {if $field.html_type eq 'Autocomplete-Select'}
                                 {include file="CRM/Custom/Form/AutoComplete.tpl" element_name = $n}
             			   {/if}
                       {/if}
diff --git a/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/Survey/Edit.tpl b/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/Survey/Edit.tpl
index a65c1a7158..be661728b6 100644
--- a/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/Survey/Edit.tpl
+++ b/tools/drupal/modules/civicrm_regsite/templates/CRM/Profile/Form/Survey/Edit.tpl
@@ -102,9 +102,6 @@
                           {/foreach}
                         </tr>
                         </table>
-                    	{if $field.html_type eq 'Radio' and $form.formName eq 'Edit' and $field.is_view neq 1 }
-                               &nbsp;<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-                    	{/if}
                         {/strip}
                     </div>
                     <div class="clear"></div>
@@ -140,10 +137,7 @@
                		       {else}       
                               {$form.$n.html}
                            {/if}
-                           {if (($n eq 'gender') or ($field.html_type eq 'Radio' and $form.formName eq 'Edit' and $field.is_required neq 1)) and
-            	       	   ($field.is_view neq 1)}
-                                   &nbsp;<span class="crm-clear-link">(<a href="#" title="unselect" onclick="unselectRadio('{$n}', '{$form.formName}'); return false;">{ts}clear{/ts}</a>)</span>
-            		       {elseif $field.html_type eq 'Autocomplete-Select'}
+            		       {if $field.html_type eq 'Autocomplete-Select'}
                                 {include file="CRM/Custom/Form/AutoComplete.tpl" element_name = $n}
             			   {/if}
                       {/if}
-- 
GitLab