The cloned object, when clicked, returns to its original form, but is not deleted

I cloned a number of elements. After cloning, the original element of the text field is replaced by a link. Then, if users want to delete the cloned item, it returns to its original location in its original form, which is tetxbox. This reversal works great. It’s just that the removal of the cloned item does not occur.

When clicked on deletion, the cloned item is deleted, but not completely. The click link value is added to the next cloned item in the list. Why is the link not deleted?

Below, ignore the name of the object and focus on the link that carries the values, starts with RM Before deleting, click (cloned element)

enter image description here

After removing a click (cloned item)
enter image description here

Here is how I cloned:

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 delete and return the original form of the 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;
}

HTML content (wrapper only) introduced 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>
0
source share
1 answer
Finally, I found the answer myself. Using $ (this) solves 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;
}
0
source

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


All Articles