Add class name for generated Html using jquery

Question

Below is html part

<li class="main_menu catagory_li" id="cat4">
    <p class="ahead"><span class="heading">Item 4</span>
    <span class="fright remove">close</span></p>
</li>

when i click close i copy the LI using below code,

$('.remove').live('click',function(){
    var closed_elem_id = $(this).parent().parent().attr('id');

        s = $(this).parent().parent().clone().wrap('<div>').parent().html();
        $('li#'+closed_elem_id).remove();
        console.log(s);

});

This one removes the LI in particular place and get the copy and store it in variable s .

My requirement is to add class called no-display in cloned copy like <span class="fright remove no-display">close</span> . I tried this many ways but it fails.

Kindly advice on this

NOTE : updated my question

Answer 1

做了一些优化： http ： //jsfiddle.net/hKUd6/

Answer 2

Something like this:

$('.remove').live('click',function(){
    var pLi = $(this).closest('li');
    s = $('<div>').append(pLi.clone().addClass('no-display')).html();
    pLi.remove();
    console.log(s);
});

Answer 3

This whole thing is very sloppy. You don't need to use as much code as you have to accomplish the simple task you're attempting.

Try something like this:

$("li").on("click", ".remove", function(){
    var $this = $(this),
        liCont = $this.closest("p"),
        parentLi = $this.closest("li");
    liCont
        .clone()
        .wrap(
            $("<div>").addClass("no-display")
        )
        .appendTo("body");
    parentLi.remove();
});

What we do here is capture the click event on any .remove elements. We select the parent p (which we later clone to wrap with a div ) as well as the parent li . We clone the p element (including its contents), wrap it with a div element (which we create using DOM scripting and add the class), and append the finished product to the body (you can change that if needed). We then remove the original li .

Answer 4

Try with this code, it should work:

$('.remove').live('click',function(){
    var closed_elem = $(this).closest("li"); //get the li to be closed/removed
    var clonedElem = closed_elem.clone().find("span.remove").addClass("no-display"); //clone the original li and add the no-display class to the span having remove class
    closed_elem.remove(); //remove the original li
    console.log(clonedElem);
});

Answer 5

Please check below lines of code.

first of all you need to get current class name using jquery:

$('li #cat4').find('span').each(function(){
  var classname = $(this).attr('class');
  $(this).addClass(classname+' no-display');
});

This is not a complete code of your task, but its just a code by which you can get a current class and then add more required string to it and set new class.

Thanks.