如何从克隆的一个改回原始元素?

时间:2015-10-16 06:46:24

标签: javascript jquery

文本框在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>");

CLONE: 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>");

}

在克隆项目上删除链接时 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;
}

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:-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>