单击时克隆的项目将恢复为原始形式，但不会被删除 [英] cloned item when clicked to , gets back to original form but doesn't get removed

问题描述

我克隆了一行元素.克隆后，原始文本框元素将替换为链接.然后，如果用户选择删除克隆的项目，它将以tetxbox的原始形式返回到原始位置.这种反转效果很好.只是没有删除克隆的项目.

I cloned a row of elements. After cloned, the original textbox element is replaced with link. Then if users choose to remove the cloned item, it gets back to original place in original form which is tetxbox. This reversing works fine. Just that the removal of cloned item is not taking place.

如果单击删除"，则克隆的项目将被删除，但不会全部删除.单击的链接的值会附加到列表中下一个克隆项目的后面.为什么链接没有被删除?

WHen clicked on remove, the cloned item is removed but not in entirety.The clicked link's value appended to the next of cloned item in the list.Why does the link didn't get remove?

下面将忽略主题名称，而将焦点放在带有以RM开头的值的链接上 删除clicked(克隆项目)之前

Below ignore the subject name and focus on the link which carries values starts with RM Before remove clicked(cloned item)

删除后单击(克隆项目)

After remove clicked(cloned item)

这就是我的克隆方式:

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='del' onclick=removeThis('"+param+"')><img src='/register/cross.png'></a>");

}

这就是我删除并更改回原始元素形式的方法.

This is how I remove and change back to original form of element.

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;
}

jquery注入的HTML(仅包装器)内容

HTML (wrapper only) content injected by jquery

    <h2>Finally, choose your Course:</h2>
    <div class="row">
        <div class="small-12 medium-12 large-12 columns" class="choosen_subjects">
        </div>
    </div>

    <div class="row">
        <div class="small-12 medium-12 large-12 columns" id="sub">

<!--original list goes here-->
        </div>
    </div>

推荐答案

最后，我自己找到了答案.使用$(this)解决了我的问题.

Finally, I found the answer by myself. The usage of $(this) is solved my problem.

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

     $("div.clone_this#"+param).detach().appendTo("#sub");
     var price = $("a[href=ch]").text();
     $(this).find($("#sub 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;
}

这篇关于单击时克隆的项目将恢复为原始形式，但不会被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！