2015-10-16 3 views
0

текстовое поле изменено, чтобы стать тегом ссылки после clone() и перемещено в начало. Теперь, когда клонированный элемент удален, элемент добавляется обратно в нижний div, откуда он появился. Это прекрасно работает, но вместо того, чтобы добавлять обратно в клонированную форму, я хочу, чтобы она была освобождена от изменений, сделанных clone() (возврат к исходной форме NOT order).Как изменить исходный элемент на клонированный?

оригинальный элемент: enter image description here

$("#sub").append("<div class='sub row clone_this' id='"+globalStore.data[i].subid+"' ><div class='small-5 medium-3 large-3 columns'><input type='text' onfocusout='getText("+globalStore.data[i].subid+")' class='text_"+globalStore.data[i].subid+"' placeholder='RM'></div><div class='small-7 medium-7 large-7 columns'>"+globalStore.data[i].subname+"</div><div class='small-2 end medium-2 large-2 columns cr'></div></div>"); 

КЛОН: enter image description here

function getText(param) 
{ 
    var clony = $("div.clone_this#"+param).remove().clone(true, true).insertBefore("#sub"); 
    var price = $("input[type=text].text_"+param).val(); 
// alert(price); 
    clony.find('input[type=text]').replaceWith("<a href='ch'><span class='green' style='font-style:italic;'>RM "+price+"</span></a>"); 
    clony.find('.cr').append("<a href='' onclick=removeThis('"+param+"')><img src='/register/cross.png'></a>"); 

} 

ПРИ УДАЛИТЬ ССЫЛКА НА щелкнул клонировали ITEM enter image description here

function removeThis(param) 
{ 
    event.preventDefault(); 
    $("div.clone_this#"+param).remove().appendTo("#sub"); 
    //find("a[href=ch]").replaceWith("input[type=text]") 
    return false; 
} 
+0

Вы ** 'removing' **, а затем пытается **' append' ** элемент, который уже ** удален **. Вместо «удаления» попробуйте [** 'detach' **] (https://api.jquery.com/detach/) элемент, а затем вы можете использовать' appendTo'. –

+0

@GuruprasadRao, remove() работает здесь, просто я хочу вернуть исходную форму элемента. – 112233

+0

Вы не можете использовать 'appendTo' после удаления' '' '' 'полностью удаляет его из' DOM' –

ответ

-1

Вы можете использовать .end() для перехода к предыдущему элементу цепи.

$(document).ready(function() { 
 
    $('#element') 
 
    .find('.child') 
 
    .css({ 
 
     'background-color': '#ddd' 
 
    }) 
 
    .end() 
 
    .css({ 
 
     'background-color': '#787878' 
 
    }); 
 
});
div { 
 
    padding: 5px 10px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="element"> 
 
    TEXT 1 
 
    <div class="child"> 
 
    TEXT 2 
 
    </div> 
 
</div>

+0

Как он отвечает на проблему? – Jai

+0

@ Justinas, я пробовал что-то вроде этого: $ ("div.clone_this #" + param) .remove(). Find ("a [href = ch]"). End(). ReplaceWith ("input [type = text ] ") appendTo (." # суб "); – 112233

+0

Это, заменяет одну ссылку на несколько текстовых полей и только это, имя объекта не отображается. Но я думаю, что end() - хорошая идея, просто не знаю, как использовать ее с умом здесь – 112233

0

Я обновил свою функцию удалить, как следовать, и она работает:

function removeThis(param) 
{ 
    event.preventDefault(); 


    $("div.clone_this#"+param).detach().appendTo("#sub"); 
    var price = $("a[href=ch]").text(); 
    $("div.clone_this#"+param).find($("a[href=ch]").text(price)).replaceWith("<input type='text' onfocusout='getText("+param+")' class='text_"+param+"' val='"+price+"' placeholder='RM'>"); 

    $("div.clone_this#"+param).find("a[href=del]").remove(); 
    return false; 
} 
Смежные вопросы