All geek questions in one place

How to change HTML properties as I duplicate it in jQuery?

I use jQuery to write a script that completely dynamically duplicates the contents of the HTML div, and then adds a button to delete the corresponding "new div". I mainly use this as a way to add more fields to the form. I would use an existing script, but all those there seem to only add input fields and are not very dynamic. That way, I can use the button to duplicate exactly what I want by adding it to HTML and NOT JavaScript.

Everything seems to work fine when it comes to duplicating the original contents of the container. The only thing I came across was assigning id to the delete button. In my example, the parent div of the “source content” is “links” ... so the first “new content” should have the identifier “links-1” ... which it does. When I create a delete button (depending on the contents of the div shown below), I want to change its id to “links-1”, and then when it clicks, it will remove the div of “new content” with the identifier “link-1”. With my current script, none of the properties of the delete button changes ...

Does anyone have any ideas?

HTML

<div id="references">
    <!-- The content to duplicate.... excludes the parent div tag i.e. only the input tag. -->
    <input type="text" name="references[]" size="30" class="text-input" placeholder="Must contain a valid, working URL." style="position: relative;z-index: 0;">
</div>
<div id="more-references">
    <-- Where to put the new content -->
</div>
<div id="remove-button" style="visibility: hidden;">
    <-- The button that removes content --> <i class="fi-x"></i>

</div>  <i class="fi-plus" rel="addMore" id="references"></i>
<!-- The button that adds content -->

jQuery:

$(function(){

    var i = 0;

    var oldRemove = $('#remove-button');

    $('[rel="addMore"]').on('click', function(){

        i++;

        var newRemove = oldRemove.clone();

        var buttonID = $(this).attr("id");
        var container = $('#' + buttonID + '-content');
        var content = container.html();
        var insertionPoint = $('#more-' + buttonID);

        insertionPoint.append('<div id="' + buttonID + '-' + i + '">' + content + '</div>');    

        newRemove.prop('id', 'remove-' + buttonID + '-' + i);               
        insertionPoint.append(newRemove.html());        

    });

});
+4
source share
6

, . . div, .

-, , div , html,

-, --, #references.

:

$(function(){
    var i = 0;
    var oldRemove = $('div.remove-button'),
        div = $('<div/>');
    $(document).on('click', 'div.remove-button', function() {
        $( $(this).data('del') ).remove();
        $(this).remove();
    });

    $('[rel="addMore"]').on('click', function(){
        i++;
        var buttonID = $(this).data("id");
        var newRemove = oldRemove.clone().data('del','#' + buttonID + '-' + i).show();
        var container = $('#' + buttonID );
        var content = container.html();
        var insertionPoint = $('#more-' + buttonID);
        insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ) );
        insertionPoint.append( newRemove );        
    });
});

JS Fiddle

, , . , data-del.

, HTML: id → class visibility: hidden → display:none.

<div class="remove-button" style="display:none;">
    <-- The button that removes content --> <i class="fi-x"></i>
</div>

, div, , , , :

insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ) );
insertionPoint.append( newRemove );

To:

insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ).append( newRemove ) ); 


$(this).remove();
+6

, , references.

, , , jQuery.clone:

var remove = $('#remove-button').clone();
remove.prop("rel", "removeThis");
remove.prop("id", buttonID + '-' + i);
var removeButton = remove.html();

var newHtml = '<div id="' + buttonID + '-' + i + '">' + content + '</div>';
insertionPoint.append(newHtml);
insertionPoint.append(removeButton);

, .

0

HTML ( SOURCEID:

<div id="references">
    <!-- The content to duplicate.... excludes the parent div tag i.e. only the input tag. -->
    <input type="text" name="references[]" size="30" class="text-input" placeholder="Must contain a valid, working URL." style="position: relative;z-index: 0;">
</div>
<div id="more-references">
    <-- Where to put the new content -->
</div>
<div id="remove-button" style="visibility: hidden;">
    <div id="SOURCEID_btn">BUTTON</div> <i class="fi-x"></i>

</div>  <i class="fi-plus" rel="addMore" id="references"></i>
<!-- The button that adds content -->

JavaScript:

var newRemove = document.createElement('DIV');
newRemove.id='remove_'+i+'_cnt';
newRemove.innerHTML=oldRemove.innerHTML.replace('SOURCEID', 'remove_'+i);
oldRemove.parentElement.appendChild(newRemove);

, :

function getRemoveHandler(i)
{
return function() {
var o=$('#remove_'+i+'_cnt');
alert('Remove: '+i+': '+o.id); };
}

vat btn=$('#remove_'+i+'_btn');
btn.bind('click', getRemoveHandler(i));

, , , , , ... , ?

0

, .

.

 function MyLogicForWhenAddIsPressed(x,y,z){

 //Check if element has a URL with regex inter alia

//Make a request to url

 //Upon Success register call to (MyLogicForWorkingUrl)
  //etc.
}
0

. , jquery-.

, :

HTML

<div id="container">
    <button class="js-copy">Copy</button>
    <div id="reference">
        <input type="text" name="references[]" size="30" class="text-input original" placeholder="Must contain a valid, working URL." />
    </div>
</div>

JQuery

$(function () {
    function generatedHTML() {
        return $('<div />', {'class': 'reference'})
            .append(
                $('<input />', {'type': 'text', 'placeholder': this.placeholder}),
                $('<button/>', {'class': 'js-remove','text': 'remove'})
            );
    }
    function dublicateInput(event) {
        var container = $(event.delegateTarget);
        var input = container.find('input.original').get(0);

        container
            .append(generatedHTML.bind(input));
    }
    function removeInput(event) {
        $(event.currentTarget)
            .off('click')
            .closest('div.reference')
            .detach();
    }

    $('#container').on('click', 'button.js-copy', dublicateInput);
    $('#container').on('click', 'button.js-remove', removeInput);
});

jsfiddle.

0

html . , . ( div). . ( )

<style>
#basicAdress, #manyAddress .addressContainer:first-child .remove{
    display: none;    
}
</style>
<!-- html base  -->
<div id="basicAdress">
<div class="addressContainer">
    <p><label>Address</label><input type="text" class="txtAddress"/> <input type="button" class="remove " value="Remove" /></p>    
</div>
</div>

<div id="manyAddress">
    <!--here goes copies-->
</div>
<div>
<script>
jQuery(document).ready(function(){
    jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');


    jQuery('#manyAddress').on('click','.remove',function(){
        //remove cloned element
        jQuery(this).parent().remove();
    });

    jQuery('#addMore').click(function(){
        //make copies
        jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');
    });

    jQuery('#sendAddress').click(function(){
        jQuery('#outputAddress').html('');
        jQuery('#manyAddress .addressContainer').each(function(i, v){
            jQuery('#outputAddress').append(
                "<p>" + (i+1) + '. ' + jQuery(this).children().find('.txtAddress').val()+ "</p>"
            );
        });
    });
});
</script>

0

Source: https://habr.com/ru/post/1539584/

More articles:


All Articles