Replace jQuery Code with plain JavaScript

Author: Cyperghost

wcfsetup/install/files/acp/templates/bbcodeAdd.tpl

@@ -43,37 +43,45 @@
 {/capture}
 
 <script data-relocate="true">
-	require(['WoltLabSuite/Core/Template'], (Template) => {
-		$(function() {
-			$('.jsDeleteButton').click(function (event) {
-				$(event.target).parent().parent().remove();
+	require(['WoltLabSuite/Core/Template', 'WoltLabSuite/Core/Dom/Util'], (Template, { hide, show }) => {
+		document.querySelectorAll('.jsDeleteButton').forEach((btn) => {
+			btn.addEventListener('click', () => {
+				btn.closest('.section').remove();
 			});
-			
-			var attributeNo = {if !$attributes|count}0{else}{assign var='lastAttribute' value=$attributes|end}{$lastAttribute->attributeNo+1}{/if};
-			var attributeTemplate = new Template('{unsafe:$attributeTemplate|encodeJS}');
-			
-			$('.jsAddButton').click(function (event) {
-				var $html = $($.parseHTML(attributeTemplate.fetch({ attributeNo: attributeNo++ })));
-				$html.find('.jsDeleteButton').click(function (event) {
-					$(event.target).parent().parent().remove();
+		});
+
+		let attributeNo = {if !$attributes|count}0{else}{assign var='lastAttribute' value=$attributes|end}{$lastAttribute->attributeNo+1}{/if};
+		const attributeTemplate = new Template('{unsafe:$attributeTemplate|encodeJS}');
+
+		document.querySelectorAll('.jsAddButton').forEach((btn) => {
+			btn.addEventListener('click', () => {
+				const html = attributeTemplate.fetch({ attributeNo: attributeNo++ });
+				const tempDiv = document.createElement('div');
+				tempDiv.innerHTML = html;
+				const section = tempDiv.firstElementChild;
+				section.querySelectorAll('.jsDeleteButton').forEach((delBtn) => {
+					delBtn.addEventListener('click', () => {
+						delBtn.closest('.section').remove();
+					});
 				});
-				$('#attributeFieldset').append($html);
+				document.getElementById('attributeFieldset').appendChild(section);
 			});
-			
-			var $buttonSettings = $('.jsButtonSetting');
-			var $showButton = $('#showButton');
-			function toggleButtonSettings() {
-				if ($showButton.is(':checked')) {
-					$buttonSettings.show();
-				}
-				else {
-					$buttonSettings.hide();
-				}
+		});
+
+		const buttonSettings = document.querySelectorAll('.jsButtonSetting');
+		const showButton = document.getElementById('showButton');
+		function toggleButtonSettings() {
+			if (showButton.checked) {
+				buttonSettings.forEach(el => show(el));
+			} else {
+				buttonSettings.forEach(el => hide(el));
 			}
-			
-			$showButton.change(toggleButtonSettings);
+		}
+
+		if (showButton) {
+			showButton.addEventListener('change', toggleButtonSettings);
 			toggleButtonSettings();
-		});
+		}
 	});
 </script>
 

wcfsetup/install/files/acp/templates/paidSubscriptionAdd.tpl

@@ -1,16 +1,23 @@
 {include file='header' pageTitle='wcf.acp.paidSubscription.'|concat:$action}
 
 <script data-relocate="true">
-	$(function() {
-		$('#subscriptionLengthPermanent').change(function() {
-			if ($('#subscriptionLengthPermanent').is(':checked')) {
-				$('#subscriptionLengthDL, #isRecurringDL').hide();
-			}
-			else {
-				$('#subscriptionLengthDL, #isRecurringDL').show();
+	require(['WoltLabSuite/Core/Dom/Util'], ({ show, hide }) => {
+		const subscriptionLengthPermanent = document.getElementById('subscriptionLengthPermanent');
+		const subscriptionLengthDL = document.getElementById('subscriptionLengthDL');
+		const isRecurringDL = document.getElementById('isRecurringDL');
+
+		function toggleSubscriptionElements() {
+			if (subscriptionLengthPermanent.checked) {
+				hide(subscriptionLengthDL);
+				hide(isRecurringDL);
+			} else {
+				show(subscriptionLengthDL);
+				show(isRecurringDL);
 			}
-		});
-		$('#subscriptionLengthPermanent').change();
+		}
+
+		subscriptionLengthPermanent.addEventListener('change', toggleSubscriptionElements);
+		toggleSubscriptionElements();
 	});
 </script>