Here is the html code

<p class="col-lg-24 col-md-24 col-sm-24 col-xs-24 color"> <span class="fa fa-square fa-4x colorinput" style="color:#ff9900" data-color="91822"></span> <span class="fa fa-square fa-4x colorinput" style="color:#4a86e8" data-color="91823"></span> </p>

Thus, I create an element <strong class="fa fa-times-circle colorinputremove"></strong>

 $('.colorinput').click(function () { var colorId = $(this).attr('data-color'); console.log(colorId); var addIcon='<strong class="fa fa-times-circle colorinputremove"></strong>'; $(this).html(addIcon); });

thus trying to delete the created object - the object <strong class="fa fa-times-circle colorinputremove"></strong>

 $(".colorinput").on('click','colorinputremove',function () { var colorId = $(this).parent('.colorinput').attr('data-color'); console.log(colorId); $(this).parent('.colorinput').empty(); })

but he fails to remove it. However, the following code:

 var colorId = $(this).parent('.colorinput').attr('data-color'); console.log(colorId);

displays the numbers in the data-color attribute of the element's parent in the console. Expected output data-color parent element and the removal of the element.

  • add console.log to both functions and see that when clicked, they both are called - Grundy
  • and, you even have logs, only they output the same thing - Grundy
  • and add html and write what it means it cannot remove it but it works out - what result is expected and what is it in reality? - Grundy
  • @Grundy Is that clear? Changed - Sergalas

2 answers 2

First, you forgot to add a point to search for classes.

 /// .colorinputremove $(".colorinput").on('click','.colorinputremove',function () { ... });

But even in this case, the element will first be deleted and then created again. Do not forget that there is a process of ascent of the event, which must be stopped through e.stopPropagation() .

 $('.colorinput').click(function () { var colorId = $(this).attr('data-color'); var addIcon='<strong class="fa fa-times-circle colorinputremove">click me</strong>'; $(this).html(addIcon); }); $(".colorinput").on('click','.colorinputremove',function (e) { var colorId = $(this).parent('.colorinput').attr('data-color'); $(this).parent('.colorinput').empty(); e.stopPropagation(); }) 
 .colorinput { width:200px; height: 20px; outline: 1px solid black; } .colorinputremove { outline: 2px solid blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="col-lg-24 col-md-24 col-sm-24 col-xs-24 color"> <div class="fa fa-square fa-4x colorinput" style="color:#ff9900" data-color="91822"></div> <div class="fa fa-square fa-4x colorinput" style="color:#4a86e8" data-color="91823"></div> </p>

  • the problem is not that it is created or deleted, it is not deleted at all. - Sergalas
  • @Sergalas, you forgot to add a point to search for classes. - Grundy
  • one
    @Sergalas, did you carefully read the answer and familiarize yourself with the example in which everything works? - Alex Krass
  • As it turned out, not until the end, thanks, everything works. - Sergalas
  • @AlexKrass, select that line in bold :-) - Grundy
 $(".colorinput").on('click','colorinputremove', ... );

Before colorinputremove you need to put an end to get a class selector and it turned out:

 $(".colorinput").on('click','.colorinputremove', ... );
  • don't go away - Sergalas