CODEWITHSUNDEEP
javascriptjquery
Gündoğdu Yakıcı
Gündoğdu Yakıcı

Reputation: 677

How to add repetitive div with jQuery?

When I click on the new button with jQuery it adds the div, but it only adds one. When I check from DevTools it constantly creates the same place. But I want it to add another one after that. Can you help me?

HTML code

    <div class="text-left" style="margin-bottom: 15px;">
        <button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
    </div>

    <div class="clone"></div>

Here are the sample js codes

    $('.add-extra-email-button').click(function() {
        var element = $('.clone');

        element.html(
            '<div class="clone_edilen_email">' +
                '<li>' +
                    '<a href="javascript:;"> Test' +
                    '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>' +
                    '</a>' +
                '</li>' +
            '</div>'
        );

        $('.clone_edilen_email').addClass('single-email remove-email');
        $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
        $('.clone_edilen_email > .single-email').attr("class", "remove-email");
    });


    $(document).on('click', '.remove-field-email', function(e) {
        $(this).parent('.btn-delete-branch-email').parent('.remove-email').remove();
        e.preventDefault();
    });

Upvotes: 0

Views: 700

Answers (3)

Rahul Kr Daman
Rahul Kr Daman

Reputation: 413

Try This Method, Append Duplicate Elements and Contents Using jQuery .clone() Method

<!doctype html>
<html>
<head>
    <title>jQuery Clone() – Add Elements and its Contents</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        div {
            margin:3px;
            padding:3px;
            border:solid 1px #999;
            width:300px;
        }
    </style>
</head>

<body>
    <p>Click the button to clone (make a duplicate) of the DIV element!</p>

    <div id="Container">Hello, how was your day!</div>
    <p><input type="button" id="Button1" value="Clone it" /></p>
    
</body>

<script>
    $(document).ready(function () {
        $('#Button1').on('click', function () {
            $('#Container')
                .clone()
                .appendTo("body");
        });
    });
</script>
</html>

Upvotes: 1

fohletex
fohletex

Reputation: 96

If I understand correctly, you want to add the <div class="clone_edilen_email"> again and again, as soon somebody clicks on the .add-extra-email-button button.

In general, calling element.html('<some_wild_html></some_wild_html>') will always override the full inner content of element with <some_wild_html></some_wild_html>. Also, if the element already contains some other sub-elements, they will got lost. In your given code example, I assume, your intention was to extend the element's html and not replace it.

Here is my suggestion:

$('.add-extra-email-button').click(function() {
 var newDiv = $('<div class="clone_edilen_mail"></div>');
 newDiv.html('<li><a href="javascript:;"> Test<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></li>');
 $('.clone').append(newDiv); // This is the important clue here!

 // afterwards you may insert your residual class stuff
 //  $('.clone_edilen_email').addClass('single-email remove-email'); <- I would suggest you add these classes already at the begining, where I set the variable "newDiv"
 // ...
 // $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
 // $('.clone_edilen_email > .single-email').attr("class", "remove-email");
});

// .. your other code may follow here ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clone">I am a clone-div!</div>
<button class="add-extra-email-button">Click Me!</button>

Hope that this might help you!

Upvotes: 3

Benjamin Ragot
Benjamin Ragot

Reputation: 3

In your first click function you replace all the content of your div clone so even if you click again you are going to have only one. He is just replacing the old one.

I didn't get what you are trying to do with the second click function.

Upvotes: -1

Related Questions