-3
jQuery(document).ready(function($) {
    $('#LM_MM_Plus_Icon').click(function(){
        $('#LM_MM_New_Div').append($('#LM_MM_Plus_Icon_Block').html());
    });
});

In the above function whenever I click on LM_MM_Plus_Icon the html in LM_MM_Plus_Icon_Block will appended to LM_MM_New_Div (which is a empty div).

The user can click any number of times on LM_MM_Plus_Icon, so that the html will be appended to LM_MM_New_Div. But what I need is every time the user clicks on LM_MM_Plus_Icon, a new LM_MM_New_Div has to be created and the html to be appended in to it.

Currently all the html is appending to one single LM_MM_New_Div.

7
  • 1
    What would the additional divs be appended to?
    – Joe
    May 28, 2014 at 13:53
  • sorry I didn't get you??? May 28, 2014 at 13:54
  • I mean, what should the newly created divs be append to? LM_MM_Plus_Icon? body?
    – Joe
    May 28, 2014 at 13:56
  • Try this: $("body").append("<div id='LM_MM_New_Div'>"+$('#LM_MM_Plus_Icon_Block').html()+"</div>") May 28, 2014 at 13:57
  • @ShivaSrikanthThummidi - The OP hasn't stated what they want it appending to and your code will create multiple divs with the same id.
    – Joe
    May 28, 2014 at 13:59

3 Answers 3

0

You should :

  • clone your #LM_MM_Plus_Icon_Block element
  • remove its id (to avoir duplicates)

jQuery(document).ready(function($) {
    $('#LM_MM_Plus_Icon').click(function(){
        $('#LM_MM_New_Div').append(
            $('#LM_MM_Plus_Icon_Block')
                .clone()
                .removeAttr('id'));
    });
    $('body').on('click', '.LM_MM_Remove_Icon', function() {
        $(this).closest('.LM_MM_Div').remove();     
    });
});
#LM_MM_New_Div {
    width: 200px;
    border: 1px solid grey;
}
#LM_MM_Plus_Icon_Block {
    display: none;
}
.LM_MM_Div {
    border: 1px solid grey;
    margin: 3px;
}
#LM_MM_Plus_Icon,
.LM_MM_Remove_Icon {
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="LM_MM_Plus_Icon">+</button>

<div id="LM_MM_New_Div"></div>
<div id="LM_MM_Plus_Icon_Block" class="LM_MM_Div">
    Content
    <button class="LM_MM_Remove_Icon">x</button>
</div>

6
  • I forgot to tell u one thing, the 'LM_MM_Plus_Icon_Block' css i kept 'display:none', so it has to be blocked at the same time. May 28, 2014 at 14:21
  • Simply use .removeAttr('id').clone().show() instead.
    – zessx
    May 28, 2014 at 14:25
  • its working but, the new div is getting added only single time...I need any number of times... May 28, 2014 at 14:31
  • @user2931525 Sorry, I gave you a wrong order : .clone().removeAttr('id').show(). (You must remove the id after cloning the element)
    – zessx
    May 28, 2014 at 14:32
  • Hi Zessx, its working fine....only one more thing I need is after the 'LM_MM_Plus_Icon_Block' html added to 'LM_MM_New_Div', the html has a 'delete_icon'. So if I click on this icon, only that particular 'block' has to be removed, not the entire 'LM_MM_New_Div'. Could you please help me on this also. May 28, 2014 at 14:45
0

You can not use same Id for multiple Div use class instead

jQuery(document).ready(function($) {
$('#LM_MM_Plus_Icon').click(function(){
     $('<div class="LM_MM_New_Div" />').append($('#LM_MM_Plus_Icon_Block').html());
     $('<div class="LM_MM_New_Div" />').insertAfter($("body").find(".LM_MM_New_Div:last"));
});});
1
  • I forgot to tell u one thing, the 'LM_MM_Plus_Icon_Block' css i kept 'display:none', so it has to be blocked at the same time. May 28, 2014 at 14:19
0

Try this approach instead:

function addBlock() {
  var block = $('<div></div>'),
      content = $('#LM_MM_Plus_Icon_Block').html(),
      deleteBtn = $('<button class="LM_MM_Delete">Delete Me</button>');
  block.html(content).append(deleteBtn).appendTo('#container');
}

$('#LM_MM_Plus_Icon').click(addBlock);
$('#container').on('click', '.LM_MM_Delete', function() { $(this).parent().remove(); });

Here's a working fiddle: http://jsfiddle.net/YM68Z/

With deletion: http://jsfiddle.net/YM68Z/1/

8
  • what is this '('{element to be added to}')' ??? May 28, 2014 at 14:11
  • I forgot to tell u one thing, the 'LM_MM_Plus_Icon_Block' css i kept 'display:none', so it has to be blocked at the same time. May 28, 2014 at 14:20
  • For instance, if you are appending it to the body, put 'body' there. If it's going inside a parent container, put the ID of the parent there. As for the 'display:none', it won't affect the new element. Just don't reuse the same ID for the new element. Hold on, I'll make a fiddle.
    – Steve
    May 28, 2014 at 14:31
  • I updated my answer with a working example
    – Steve
    May 28, 2014 at 14:35
  • sorry... the link is going to your home page. May 28, 2014 at 14:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.