Replace element with jquery

there's no need to separate class names with acomma just use space instead

Hi @SerhiiNuzhnyi You have many mistakes on your js codes

$(document).ready(function() { // <= https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Statements/block

     $(document).on("click", ".name, .email, .phone, .city", function() {
    // in this scope this means your html document
        $(this).off( "click" ); // this will remove click events on you codument
        $(this).empty();
        $(this).html("<input type='text'>").focus();
    });
});

You should use more specific selectors not => $(document) like => $('.button')

Well. Here this means clicked element. I tested. If this means html document why $(this).empty(); wont empty entire document but only clicked element? $(this).off( "click" ) - doesnt remove click events at all.

This works for me

$( ".name, .email, .phone, .city" ).on( "click", function( event ) {
  $( this ).off( event );
  $(this).empty();
        $(this).html("<input type='text'>").focus();
});

You try to focus on div element, not input.

Replace:

$(this).html("<input type='text'>").find('input').focus();

Working example: https://jsfiddle.net/7xovtj20/

You probably don't need this $(this).empty(); either, since on the next line you replace the html anyway.

Cipsas and Cronix you are right both. Thank you. It is usefull.

Well. Now I have this code

var prev = '';
  $(document).ready(function()
{
    $( ".name, .email, .phone, .city" ).on( "click", function( event ) {
$('.user_data').replaceWith(prev);    
prev= $(this).text();
$(this).html("<input type='text' class='user_data'>").find('input').focus().off(event);

});
});

The problem is when I want to return after I clicked another element to previous element and click on it second time it wont react to click. This because I use .off(event) but I must use it to avoid dissapearing text in input when I try to click inside input field. I know it s a bit hard to understand I can explain later.

You are adding the event listener to the document rather than a separate one for each element.

This is fine as if there are a lot of matching elements or if new matching elements are added dynamically it will still apply to them.

However this does mean that when you are removing the event listener with the off method it will not work for any element.

You likely don't need to use off at all you aren't attaching any event listeners to the elements you are replacing.

Yes elements are loaded dynamically and I suppose event listener is added to each element from class list. I would like to have no event listener on new added input but after click on it input field become empty so I assume that event is called again after click and empty the field.. And with this off() method I can click on input with no event and type text. But after click on another element I cant return to this because off() method remove listener.

So I found proper way to work for me

var prev = '';
$(document).ready(function()
{
    $( ".name, .email, .phone, .city" ).on( "click", function( event ) {
if($(this).children('.user_data').length<1){
$('.user_data').replaceWith(prev);    
prev= $(this).text();
$(this).html("<input type='text' class='user_data'>").find('input').focus();
}
});
});

You can use simply:

 $(document).ready(function()
{
     $(document).on("click", ".name, .email, .phone, .city", function()
     {
        
        if($(this).find('input').length == 0){
            $(this).html("<input type='text'>").find('input').focus();
        }
   
        
    });
});

To add initial text in input:

 $(document).ready(function()
{
     $(document).on("click", ".name, .email, .phone, .city", function()
     {
        
        if($(this).find('input').length == 0){
            var value = $(this).text();
            $(this).html("<input type='text'>").find('input').val(value).focus();
        }
   
        
    });
});

Working example: https://jsfiddle.net/7xovtj20/2/

Here I add initial text to previous element and you to current.

@SerhiiNuzhnyi So you need to have one input field on current editing item?

To avoid complexity, I would try to play with css only - hide border, show them if input field is focused. It would be similar effect

Thank you cipsas.