0

I am cloning an element and removing the id to avoid duplicates. Typically there will only be a class. In the event an end user chooses to use an id and style it, I want to ensure the style is preserved on the cloned element. Here is a rudimentary example.

/* css */

#unique {
  background: yellow;
}
.general {
  border: 1px solid blue;
}

/* html */

<div id="container">
  <div id="unique" class="general">hello</div>
</div>

/* js/jquery */

$(function() {
    $( ".general" ).clone().appendTo( "#container" ).removeAttr( "id" );
});

EDIT: The linked duplicate provides a jQuery plugin solution. It uses .getComputedStyle method which works but is resource intensive since it loads all of the computed styles. I was hoping for a way to identify only the end user's couple of styles that they may have applied to an id.

  • Possible duplicate of [Can jQuery get all CSS styles associated with an element?](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) – Jon Uleis Dec 29 '16 at 15:57
  • Can't you just create a class with those styles and insert that? – Rob Dec 29 '16 at 15:59
  • Why not just remove the id when you clone it instead of reselecting it? – epascarello Dec 29 '16 at 16:04
  • @Rob The application is already styled with classes. The idea is to ensure the application works as expected even if the end user decides to put an id on something and style it that way. Even though they shouldn't. –  Dec 29 '16 at 17:15
  • So you would either need to read the stylesheets and parse all the rules that may apply to your element or you have to live with the computation time. There is NO simple answer. – epascarello Dec 29 '16 at 17:23
  • no need to define a general class - use e general selector as in: `#unique { background: yellow; } #unique div { border: 1px solid blue; }` – Bekim Bacaj Dec 29 '16 at 20:04
  • @BekimBacaj Unrelated to the question. "Here is a rudimentary example." The application may have any number of elements so there is a reason for the class. –  Dec 29 '16 at 20:47
  • @epascarello Thank you. Removing the id when cloning saves a step. I'll have to discourage the end users from styling ids or live with the computation time. –  Dec 29 '16 at 20:54

1 Answers1

0

id attribute needs to be unique but classes not. So bind all CSS rules to a class, so when you remove the id the styles will stay. It is a bad practice to use id selectors in CSS.

Then you can add a class only for that specific rule that you need to be unique and remove the class from cloned objects using $(...).removeClass() function.

Tha'er AlAjlouni ثائر العجلوني
  • 14,069
  • 7
  • 33
  • 38
  • The application _is_ styled with classes... This answer is not helpful toward the purpose of the question which states "Typically there will only be a class. In the event an end user chooses to use an id and style it..." The idea is to ensure the application works as expected even if the end user is not following best practices. –  Dec 29 '16 at 17:14
  • The only other way I see is using the `getComputedStyle` function as per your edit. Sorry for not being able to help! – Tha'er AlAjlouni ثائر العجلوني Dec 29 '16 at 19:17