Home/ Questions/Q 7839025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T15:17:43+00:00

I have a button that creates paragraphs dynamically in a div along with an

  • 0

I have a button that creates paragraphs dynamically in a div along with an ID.
When you create a paragraph you can also select that paragraph (“background color changes”) by clicking it, along with that (“When you click on paragraph”) a div is created with a link inside of it.
Tried to remove individually but it would remove all the paragraphs at once

How can I remove a paragraph that is being selected(“I mean individually”)?

Here is link and what I have so far:

http://jsfiddle.net/RzvV5/88/

Javascript/jQuery Code:

$(document).ready(function(){
    var id = 1;
    $("#push").on({
        click: function(){
            var pr = $('<p class="test">This is text ' + id + '</p>');
            var d = $("#Test");
            var pclone = $(pr).clone();
            pclone.on({
                mouseenter: function(){    
                    $(this).addClass("inside");
                },
                mouseleave: function(){                             
                    $(this).removeClass("inside"); 
                },
            });
            pclone.appendTo(d);
            id++;
        }
    });

    var div =  $('<div class="customD" id="d"></div>');
    var del = $('<a href="#" class="delete" id="erase">Delete</a>');
    var pcust = $(div).clone();
    var pdel = $(del).clone();

    $("#Test").on("click", "p", function(){ 
        var cur = $(this).css("background-color");

        if(cur=="rgb(255, 255, 255)") {  
            $(this).css("background-color","red").addClass("help insider");
            $(this).after(pcust);
        } 
        else { 
            $(this).css("background-color","white").removeClass('help insider');
            $(pcust).remove();
        }    

        $(pcust).append(pdel);

    }); 
});

HTML Code:

<html>
<body>
    <a href="#" id="push">Push</a>
    <div id="Test"></div>
</body>
</html>

CSS Code:

.test { color: #000; padding: .5em; margin: 0px; border: 2px solid white; background: white;} 

.help { border: 2px dashed #FDD }

.inside { border: 2px solid red    }

.insider { border: 2px solid #FDD; }

.delete {  font-size: 12px; }
.customD { background: yellow}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can add click event handler to delete link

     $(".delete").live("click",function(){
        $(this).parent().prev().remove();
        $(this).remove();
    });

    BTW. You don’t have to clone each time link and its parent div, you can build up that part of dome and hold same reference, if you reuse it with

    var div =  $('<div class="customD" id="d"></div>');
var del = $('<a href="#" class="delete" id="erase">Delete</a>');
div.append(del);

    $("#Test").on("click", "p", function(){ 

       ....
       $(pcust).append(del); //this will not clone delete div, it will actually replace its position it dome structure and move it from one paragraph to "pcust". This will save memory!!!

        ....
    };
    • 0