S.Oruc S.Oruc - 11 months ago 73
CSS Question

Change something in the clone

The first 2 div's comes from database the 3rd is a clone.
The problem is that I whant to change the clone but if i do that all div's will change.

What I whant:

1- the red line (is if the value is false) must not be applied to the clone

2- the clone must replace the 2 spans (icon) with 1 (another icon) span

enter image description here

the code i use for the clone is

$(document).on("input", ".add", function(obj){
if ($(this).next(".add").length > 0){

} else {
$(this).clone().insertAfter( this ).find("input:text").val("");

the code i use for the red line is

$('.statuss').each (function(obj){

if ($(this).val() == "False")

$(this).parent().find('div').css("background", "#ff8080");

sorry for not beeing able to give a fiddle.


the 2 icons are (ui-icon.ui-icon-closethick and ui-icon.ui-icon-check) must be replaced with (ui-icon-close)

Answer Source

Try this to make changes into the clone, Hope this helps.


As per your question, I understand that you would like to create a clone of an element with few new changes. I just show you an idea how to do that, you can do necessary changes as per your need.

See working snippet for more details.

    .removeClass('ui-icon.ui-icon-closethick ui-icon.ui-icon-check neeToClone')
    .css('color', 'red')
    .html('Clonned DIV')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui-icon.ui-icon-closethick and ui-icon.ui-icon-check neeToClone">Div-1</div>

<a href="javascript:void(0)" class="clone">Clone</a>

Edit-1: Added new code

$(document).on("input", ".yourDiv", function(){
    if ($(this).next(".yourDiv").length > 0){
    console.log("There is already a Clone of this Div")
  } else {
    var clone = $(this).clone();
    $(clone).find('span.ui-icon-closethick').removeClass('ui-icon ui-icon-closethick').addClass('ui-icon ui-icon-close');