Click on the appended text to remove it using Jquery

Question

Click on the appended text to remove it using Jquery

Seeking a more efficient and streamlined approach for appending and removing appended spans, divs, or text. Below is the code snippet - any insights on what could be improved?

/* HTML CODE */
<div id="appendHere" style="padding:10px;border:solid 1px red"></div>

/* Jquery CODE */
$('#appendHere').on('click' , function() {
    $('#appendHere').append('<span style="padding:10px;border:solid 1px green;">Simple text</span>');
});

$('#appendHere span').on('click' , function() {
    $(this).remove();
});

javascript jquery html css append

Answer 1

Answer №1

VIEW DEMO

If you want to experiment with using .toggle()

For instance :

$('#appendHere').on('click' , function(event) {
 $('#appendHere span').toggle();
});

Answer 2

VIEW DEMO

If you want to experiment with using .toggle()

For instance :

$('#appendHere').on('click' , function(event) {
 $('#appendHere span').toggle();
});

Answer 3

Answer №2

Depending on the jQuery version you are currently using, your use of .live() could be causing issues. Consider trying .on() instead. Here's an example:

$(document).on('click', '#appendHere span', function(){$(this).remove();});

Alternatively, you can also attempt something like this:

<style>
#addHere{padding:10px;border:solid 1px red;}
#addHere span{padding:10px;border:solid 1px green;}
</style>

<div id="appendHere" data-has_span="false"></div>
$(document).on('click', '#appendHere', function()
{
    $elem = $(this);
    if($elem.data('has_span') == "false")
    {
        $elem.prop('data-has_span', 'true').append('<span>Text here</span>');
    }
    else
    {
        $elem.prop('data-has_span', 'false').find('span').remove();
    }
});

Answer 4

Depending on the jQuery version you are currently using, your use of .live() could be causing issues. Consider trying .on() instead. Here's an example:

$(document).on('click', '#appendHere span', function(){$(this).remove();});

Alternatively, you can also attempt something like this:

<style>
#addHere{padding:10px;border:solid 1px red;}
#addHere span{padding:10px;border:solid 1px green;}
</style>

<div id="appendHere" data-has_span="false"></div>
$(document).on('click', '#appendHere', function()
{
    $elem = $(this);
    if($elem.data('has_span') == "false")
    {
        $elem.prop('data-has_span', 'true').append('<span>Text here</span>');
    }
    else
    {
        $elem.prop('data-has_span', 'false').find('span').remove();
    }
});

Answer 5

Answer №3

Avoid using the live method and consider using either .bind() or .on() instead

The scenario is such that when you click on a span, it triggers a click event on a div and a time computation

You can achieve this functionality by implementing the following code:

$("appendHere").on("click", function(e) {
    if(!$(this).is($(e.target))) {
        return false;
    }
    $("<span>Text here</span>").appendTo($(this)).on("click", function() {
         $(this).remove();
    });
});

Answer 6

Avoid using the live method and consider using either .bind() or .on() instead

The scenario is such that when you click on a span, it triggers a click event on a div and a time computation

You can achieve this functionality by implementing the following code:

$("appendHere").on("click", function(e) {
    if(!$(this).is($(e.target))) {
        return false;
    }
    $("<span>Text here</span>").appendTo($(this)).on("click", function() {
         $(this).remove();
    });
});

Click on the appended text to remove it using Jquery

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring that the text snippet is positioned centrally inside a container

What is the best way to create a linear flow when chaining promises?

Tips for ensuring that a JavaScript program does not get blocked by other API calls

Implementing the jQueryUI checkboxradio feature across all checkboxes within an entire ASP web application

The local copy of Jquery.min.js is failing to trigger the window load function

In order to show the responses underneath, we must first identify the parent comment

Is it possible for me to use ts files just like I use js files in the same manner?

Real-time Updating of ChartJS Charts in Rails Using AJAX

Exclusive pair of vertices within a network

What is the best way to select a specific value from JSON (Webhook) Data?

Exploring jQuery AJAX Attributes during ajaxStart and ajaxStop event handlers

"A comprehensive guide to Node.js: Mastering the art of handling errors in

Change the data returned by Ajax

Incorporate CSS file into the head section or directly within the HTML section without the need for JavaScript

Create your masterpiece on a rotated canvas

Can you distinguish between these two plunkers - one using AngularJS and the other using Angular-UI?

Ways to activate a function upon validation of an email input type

Passing a parameter to an AngularJS directive, which triggers the opening of an ngDialog, and subsequently updating the value to reflect changes in the root scope

Re-rendering multiple components with the new `use` feature in React version 18.3.0

A step-by-step guide on utilizing img src to navigate and upload images