Question

I have structure like this:

<div id="mali_oglasi">
    <?php foreach ($mgs as $key) : ?>
    <p class="mali_oglas">
        <span class="name"><?php echo $key['name'] ?></span>
        <span class="body"><?php echo $key['body'] ?></span>
        <span class="contact_author"><?php echo $key['contact_author'] ?></span>
        <span class="date_created"><?php echo $key['date_created'] ?></span>
        <span class="date_expires"><?php echo $key['date_expires'] ?></span>
        <span class="email"><?php echo $key['email'] ?></span>
    <?php foreach ($lokacija as $lok) : ?>
    <?php if($lok['id_location'] == $key['location_id']) : ?>
    <span><?php echo $lok['name'] ?></span>
    <?php endif ?>
    <?php endforeach; ?>

    <?php foreach ($kategorija as $kat) : ?>
    <?php if($kat['id_category'] == $key['category_id']) : ?>
    <span><?php echo $kat['name'] ?></span>
    <?php endif ?>
    <?php endforeach; ?>
    <a class="obrisi" id="<?php echo $key['id_global_info'] ?>">Obrisi</a>     
    <a class="izmeni" id="<?php echo $key['id_global_info'] ?>">Izmeni</a>  
</p>
    <?php endforeach; ?>
</div>

When <a class="izmeni" id="<?php echo $key['id_global_info'] ?>">Izmeni</a> is clicked it need to change span to input or textarea. How can I do this?

Answer 1

You would use jQuerys .replaceWith()-method. E.g.

$('.izmeni').on('click', function() {
    $('span').replaceWith('<input />');
});

You can also walk up the DOM in your click handler to get to your target element:

$('.izmeni').on('click', function() {
    $(this).closest('span').replaceWith('<input />');

    // or:
    //  $(this).closest('p').find('span').replaceWith('<input />');
    // etc.
});

Or something similar. Take a look at jQuerys various tree traversal functions.