bucle de un div usando jquery [cerrado]

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, Un nuevo 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.

preguntado el 28 de mayo de 14 a las 14:05

What would the additional divs be appended to? -

sorry I didn't get you??? -

I mean, what should the newly created divs be append to? LM_MM_Plus_Icon? body? -

Try this: $("body").append("<div id='LM_MM_New_Div'>"+$('#LM_MM_Plus_Icon_Block').html()+"</div>") -

@ShivaSrikanthThummidi - The OP hasn't stated what they want it appending to and your code will create multiple divs with the same id. -

3 Respuestas

Debería :

  • clonar tu #LM_MM_Plus_Icon_Block elementos
  • 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>

Respondido el 22 de enero de 15 a las 08:01

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. - user2931525

Sólo tiene que utilizar .removeAttr('id').clone().show() en lugar de. - zessx

its working but, the new div is getting added only single time...I need any number of times... - user2931525

@user2931525 Sorry, I gave you a wrong order : .clone().removeAttr('id').show(). (You must remove the id después de cloning the element) - zessx

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. - user2931525

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"));
});});

contestado el 28 de mayo de 14 a las 14:05

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. - user2931525

Pruebe este enfoque en su lugar:

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(); });

Aquí hay un violín que funciona: http://jsfiddle.net/YM68Z/

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

contestado el 28 de mayo de 14 a las 16:05

what is this '('{element to be added to}')' ??? - user2931525

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. - user2931525

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

I updated my answer with a working example - Steve

sorry... the link is going to your home page. - user2931525

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.