Adding and removing html elements in jQuery

Question

I',m quite new with jQuery and I face a problem.

When I try to delete elements at the beginning it works, but when I add new element and then try to delete it, other siblings li elements are deleted too. How Can i Solve it?

That's basic structure:

<br/>
<b>Delete</b>
<input type="radio" id="delnod" name="action" title="Delete"/>     
<br/>  
<b>Add</b>        
<input type="radio" id="addnod" name="action" title="Add"/>
<br/>  
        <ul id="rodzic">
        <li id="xx">XX
            <ul id="cv">
                <li id="vb">aa</li>
                <li id="hh">vv</li>
                <li id="fg">cc</li>
            </ul>
        </li>
        <li id="yy">YY
            <ul id="zz">
                <li id="vv">12</li>
                <li id="vx">34</li>
                <li id="vz">55</li>
            </ul>
        </li>            
    </ul>

And that's jQuery code:

  $(document).ready(function() {
    $("ul,li").click(function() {
        if ($('#delnod').is(':checked'))
        {
            if (confirm('Do you want to delete?'))
            {
                $(this).remove();
                return false;
            }
        }


        if ($('#addnod').is(':checked'))
        {

            $("<li>And me too!</li>").insertAfter(this);
   //       $(this).closest('ul').children(':last').before('<li />'); 
                return false;
         }
    });
});

can u create like in jsfiddle

PSR
– PSR

2013-05-28 02:53:30 +00:00
Commented May 28, 2013 at 2:53 — PSR
– PSR, Commented May 28, 2013 at 2:53

techfoobar · Accepted Answer · 2013-05-28 03:10:57Z

2

The selector $("ul,li") which you are using ahead of the .click() handler looks incorrect. It will match all <ul>s and <li>s, instead of just <li>s.

Try this instead to only match <li>s (which are inside a <ul>)

$("ul li").click(function() {
    ...
});

Note: the below point originally discovered and answered by PSL. Just editing this answer to remove the incorrectness.

Another reason is that, your newly created LIs don't have any event handler attached to them, Binding using .on() to a parent level element will solve it.

$("ul").on('click', 'li', function() {
    ...
});

edited May 28, 2013 at 3:10

answered May 28, 2013 at 2:53

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stacey Garrison Over a year ago

Yeah (ul, li).click would mean, "when I click all the UL tags and all the li tags)

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Issue is with your click handler. when you click on newly created li and click on it. it doesn actually have a click event bound to it, instead it's parent li's click event kicks in and deletes it. You can use event delegation for click event for newly added elements using on() .

See doc for .on()

Demo

Try this:-

 $('ul').on('click' , 'li', function() {// I have provided ul as an example, You may want to attach it to the container of ul that already exists. Say a div.
             if ($('#delnod').is(':checked'))
        {
            if (confirm('Do you want to delete?'))
            {
                $(this).remove();
                return false;
            }
        }

With this event is attached to the ul and any newly created li will get its own click event available by delegation.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 28, 2013 at 2:59

PSL

124k21 gold badges257 silver badges243 bronze badges

1 Comment

techfoobar Over a year ago

@OP - +1 This is the real reason. The newly created LIs don't actually have a click event bound to it, instead it's parent li's click event kicks in and deletes it

score 1 · Accepted Answer · 2013-05-28 04:57:42Z

Working FIDDLE Demo

Because you are dynamically create new elements, you must use .on() method:

$('body').on('click', 'ul li', function() {
    // code
});

And when you want to insert your new element, you must use this:

$("<li>And me too!</li>").appendTo($(this).closest('ul'));

Here is the full code:

$(document).ready(function() {
    $('body').on('click', 'ul li', function() {
        if ($('#delnod').is(':checked')) {
            if (confirm('Do you want to delete?')) {
                $(this).remove();
                return false;
            }
        }

        if ($('#addnod').is(':checked')) {
            $("<li>And me too!</li>").appendTo($(this).closest('ul'));
            return false;
        }
    });
});

References:

.on() - jQuery API Documentation
.appendTo() - jQuery API Documentation
.closest() - jQuery API Documentation

Chris S. · Accepted Answer · 2013-05-28 02:57:02Z

0

You have a tree of elements there, on whichs parent you as well trigger the click event.

$(...).click(function(e){ if (e.target !== this) { return false; } /* your code here */

This shall ensure the click event was actually fired on exactly the desired element and neither of its child elements.

also see the API reference for stopPropagation

answered May 28, 2013 at 2:57

Chris S.

1,25712 silver badges25 bronze badges

Collectives™ on Stack Overflow

Adding and removing html elements in jQuery

4 Answers 4

1 Comment

Demo

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related