S.Oruc S.Oruc - 2 months ago 12
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.

EDIT:

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

Answer

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

$(this)
.clone()
.removeClass()
.addClass('ui-icon.ui-icon-close')
.appendTo('body');

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.

$('a.clone').click(function(){
  $('.neeToClone')
    .clone()
    .removeClass('ui-icon.ui-icon-closethick ui-icon.ui-icon-check neeToClone')
    .addClass('ui-icon.ui-icon-close')
    .css('color', 'red')
    .html('Clonned DIV')
    .appendTo('body');
});
<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');
    $(clone).find('span.ui-icon-check').remove();
    $(clone).insertAfter(this).find("input:text").val("");
  }
});