SharePoint: How to clear Metadata and People Editor fields using jQuery

Challenge:

NewForm and EditForm of a custom SharePoint list contain Managed Metadata field and People Editor fields. I need to be able to clear the field values dynamically based on what selections the user makes when filling the form.

Just hiding the fields is not good as I don't want to include an additional column only for storing the value of the radiobutton selection.

Solution:

This is possible by using few Javascript tricks, and as I'm most familiar with jQuery I decided to use it to accomplish the goal. There are few hidden fields you need to modify in addition to the visible elements.

First you need to surround the fields with DIV's so that it is easier to reference the correct elements.

<asp:RadioButton runat="server" id="presenterSisainen" Text="Sisäinen" GroupName="presenter" />
<div id="presenterUserDiv" style="display:none;">
<SharePoint:FormField ... />
<SharePoint:FieldDescription ... />
</div>
<asp:RadioButton runat="server" id="presenterAsiakas" Text="Asiakas" GroupName="presenter" />
<div id="presenterMetadataDiv" style="display:none;">
<SharePoint:FormField ... />
<SharePoint:FieldDescription ... />
</div>

To clear Metadata field, do this:

jQuery("#presenterMetadataDiv > span > span > input[type='hidden']").val("");
jQuery("div[title='DISPLAYNAMEOFMETADATAFIELD'] > div > span[class$='valid-text']").replaceWith("&#8203;");
jQuery("#presenterMetadataDiv > span span.ms-formvalidation[role='alert']").html("");
jQuery("#presenterMetadataDiv > span > br").remove();

Note: 'DISPLAYNAMEOFMETADATAFIELD' needs to be the display name of the metadata field in question. It can contain spaces, etc. If it contains special characters such as umlauts, remember to save your .js file using UTF-8.

To clear People Editor field, do this:

j("#presenterUserDiv input[id$='HiddenUserFieldValue']").val("");
j("#presenterUserDiv span[id$='UserField']").attr("editoroldvalue", "");
j("#presenterUserDiv input[id$='UserField_hiddenSpanData']").val("");
j("#presenterUserDiv div[name='upLevelDiv']").html("");
j("#presenterUserDiv span[id$='UserField_errorLabel']").html("");

Note: You can use different jQuery selectors to achieve the same result, so above is not the only truth.