remove IDs from repeater component in Oxygen (to remove Lighthouse Error)

code-block.js

  jQuery(".oxy-dynamic-list").find("*").removeAttr('id');

@wplit How about if we just want to remove the duplicate repeater ID but not the ID's applied from the dynamic data from the user who adds ID's to let's say H1-H6 elements from an ACF WYSIWYG editor. This function removes everything.

Updated code; (thanks, hadn't thought about that)

jQuery(".oxy-dynamic-list").find("*[class^='ct-']").removeAttr('id');

This will only target elements created with Oxygen components.

Great, do you have a solution for the duplicated ID's in Gutenberg blocks? Same issue there, but might be much more complex to target as long as we don't wrap it in a div with a custom ID that the jquery can target and check IDs in these wrappers. That way it would work to use the same logic as above.

But would like to target only default ID's since I also need to add IDs with other scripts to try to create a table of content that adds IDs to the headlines.

So even there it might be best to rename the default ID in the Gutenberg blocks to be able to target only this specific one?

woah, I didn't know about the Gutenberg duplicate ID problem. Oh boy, this will get messy.

Something like this would work to search through the whole html and find only the id's that are duplicated, then remove the id attribute for those elements only..

(function($){

  //abort if we're viewing inside builder
  if ($ ('html'). attr ('ng-app') == 'CTFrontendBuilder') 
     return;

  // Find Duplicate IDs and remove them
  $('[id]').each(function(){
    var duplicateIds = $('[id="'+this.id+'"]');
    if(duplicateIds.length>1 && duplicateIds[0]==this){
      duplicateIds.removeAttr('id');
    }
  });
  
})(jQuery);

I do hope there is some way Oxygen can build an option to disable all ID's on the front end. Or at least turn them into classes if they need to be there. Would solve all these problems in one go.

Note; there's likely a better solution (better in terms of jQuery performance) but I haven't time now to go into it.

Related if anybody wants to give it a go : https://stackoverflow.com/questions/482763/jquery-to-check-for-duplicate-ids-in-a-dom

This performs much faster.. Note; this will not remove the first instance of the ID found, only the duplicates of that ID found further down the page. So the first stays in the html the 2nd, 3rd, 4th... just the duplicates are removed. This is because when it finds the first one, it doesn't yet know it has duplicates and it only runs once down the page, when it finds the 2nd one, it removes it and so on... The previous code, above, removes all IDs that have duplicates, even the very first one, but it's slower to run.

(function($){
 
  //abort if we're viewing inside builder
  if ($ ('html'). attr ('ng-app') == 'CTFrontendBuilder') 
     return;

  var ids = {};
  $('.oxygen-body [id]').each(function() {
    if (this.id && ids[this.id]) {
     $(this).removeAttr('id');
    }
    ids[this.id] = 1;
  });
  
})(jQuery);

I do hope there is some way Oxygen can build an option to disable all ID's on the front end. Or at least turn them into classes if they need to be there. Would solve all these problems in one go.

Yeah, let's see what they figure out here since we run into the same issue over and over again. Would be great to move over to classes let user utilize ID for other purposes such as jump/anchor links.

Thanks, I'll give it a run later on!

It's not possible to do this in php to not even render specific block ID's in the frontend. Thinking about this being more suitable for performance than manipulate with jQuery. If possible.

Many workarounds in inline js now, think I will be about time to enqueue a static file so be can utilize caching.