JQuery - удаление HTML, созданного с помощью .clone

Question

JQuery - удаление HTML, созданного с помощью .clone

0

Все,

У меня есть кусок HTML, который я использую в качестве источника для .clone() JQuery .clone(). В блоке HTML включен значок "удалить", который при щелчке должен удалить скопированный фрагмент HTML, но это не так.

Я, вероятно, не правильно выбрал скопированный элемент, но я не уверен.

благодаря

Вот JSFiddle

Вот код:

HTML-код

<div id="container">
    <h2>Sponsors Section</h2>
    <form action="" id="myForm">
     <div id="addCosponsorSection" style="width:900px; margin-left:12px;">
        <div id="cosponsors">
            <span class="formColumn1"><label for="sponsorclubname1">Sponsor club name 1:</label></span>
            <span class="formColumn2"><input  type="text" id="cosponsorcontact" name="cosponsorcontact"  placeholder="Name" title="Co-sponsor contact" /></span>
            <span class="formColumn3"><input  type="text" id="cosponsoremail"  name="cosponsoremail"     placeholder="Email" title="Co-sponsor email" /></span>
            <span class="formColumn4"><input  type="text" id="cosponsorphone"  name="cosponsorphone"     placeholder="Phone" title="Co-sponsor phone" /></span>
      </div>
       <div class="clear"></div>
     </div>
     <div class="clear"></div>
        <p>
          <span class="js-add-cosponsor-hyperlink">+ cosponsor</span>
        </p>   
     </form>




<!-- Start Add Co-Sponsor Row Template -->
<div style="display:none">
        <div id="cosponsorsTemplate">
            <span class="formColumn1"><label>Sponsor club name</label></span>
            <span class="formColumn2"><input  type="text" id="cosponsorcontact" name="cosponsorcontact"  placeholder="Name" title="Co-sponsor contact" /></span>
            <span class="formColumn3"><input  type="text" id="cosponsoremail"  name="cosponsoremail"     placeholder="Email" title="Co-sponsor email" /></span>
            <span class="formColumn4"><input  type="text" id="cosponsorphone"  name="cosponsorphone"     placeholder="Phone" title="Co-sponsor phone" /><a class="icon delete"></a></span>
      </div>
</div>    
<!-- End Add Co-Sponsor Row Template -->

JS

  $(document).ready(function () {
        var uniqueId = 1;
        $(function () {
            $('.js-add-cosponsor-hyperlink').click(function () {

                var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection").hide().fadeIn('slow');
                var cosponsorDivId = 'cosponsors_' + uniqueId;
                copy.attr('id', cosponsorDivId);

               var deleteLink = $(this).find('.icon delete');
                deleteLink.click(function () {
                    copy.fadeOut(300, function () { $(this).remove(); }); //fade out the removal

                });

                $('#' + cosponsorDivId).find('input').each(function () {
                    $(this).attr('id', $(this).attr('id') + '_' + uniqueId);
                    $(this).attr('name', $(this).attr('name') + '_' + uniqueId);



                });

                uniqueId++;
            });
        });
    });

Slinky 06 янв. 2014, в 21:54

Источник

1

$(this).find('.icon delete'); выглядит неправильно ... разве вы не находите кнопку удаления внутри клона, а не внутри кнопки, на которой был создан клон?
Kevin B 06 янв. 2014, в 20:56

Теги:

jquery

jquery-selectors

2 ответа

2

В настоящее время вы пытаетесь выбрать значок удаления в ссылке + cosponsor. Вам нужно выбрать фактическую копию элемента шаблона.

У меня был успех, определяя скопированный элемент как его собственную переменную. Таким образом, вы можете выбрать элементы внутри скопированного элемента.

var thecopy=copy.attr('id', cosponsorDivId);

Я также заменил обработчик click() on():

var deleteLink = thecopy.find('a.icon.delete');

deleteLink.on('click',function () {
    copy.fadeOut(300, function () { $(this).remove(); }); //fade out the removal
});

http://jsfiddle.net/zAgS7/2/

showdev 06 янв. 2014, в 18:21

Ещё вопросы

$(this).find('.icon delete'); выглядит неправильно ... разве вы не находите кнопку удаления внутри клона, а не внутри кнопки, на которой был создан клон?

James Hibbard · Accepted Answer · 2014-01-06T19-45-00.000Z

Измените это:

var deleteLink = $(this).find('.icon delete');

к этому:

var deleteLink = copy.find(".icon.delete");