Unable to click on button`

#1

i have make this todo list
and add click function on li
but in the li there is a delete button also to delete the task

when i click on trash button then it consider as li click

i want to make two clicks function one on li and other on button

how can i achieve this without changing the html structure

#2

@anandprakash1091971 share you html, css and js code here, so that I can take a look what you are doing currently

#3

i fogot to share the code

#4

Are you checking the code??

I am waiting

#5

@anandprakash1091971 yes, I am checking your code now, can you please elaborate on your problem, what is it you want to achieve and what do you currently have

#6

@anandprakash1091971 I think this is your query, when you click on trash button in list, then again the list click event triggers and you want two separate events for both. For this, you have to add this line in your btnTrash click trigger

event.stopPropagation();
#7

Please check the code again i have commited some changes

My problem

liItem.click(() => {
            liItem.toggleClass('done');
        })

using this
when i click on any list item then its class changed
and new style applied

li.done{
    color: #6c757d;
    text-decoration: line-through;
}

now problem is in the same list i have a trash button
using which i want to delete that item

how can i do that ??

#8

thankyou
i got this point

$(document).ready(function () {
    let ulTasks = $('#ulTasks');
    let btnAdd = $('#btnAdd');
    let btnClear = $('#btnClear');
    let inpTask = $('#inpTask');
    function addItem() {
        if (inpTask.val() == '') {
            console.log("err");
            $('#errMsg').css('display', 'block');
            return;
        }
        $('#errMsg').css('display', 'none');
        let liItem = $('<li>')
            .attr("id", "liItem")
            .addClass("list-group-item")
            .text(inpTask.val())
            .append(
                $('<button>')
                    .attr('id', 'btnTrash')
                    .append(
                        $('<i>')
                            .addClass('fa fa-trash')
                    )
                    .click((event)=>{
                        // console.log('clicked');
                        event.stopPropagation();
                     // HOW TO DELTE IT NOW
                    })
            )
        liItem.click(() => {
            liItem.toggleClass('done');
        })

        ulTasks.append(liItem);
        inpTask.val('');
    }
    
    btnAdd.click(addItem);

    inpTask.keypress((event)=>{
        // console.log(event.which);
        if(event.which==13)addItem();
    })

    btnClear.click((event) => {
       inpTask.val('');
    })
})
#9

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.

#10

NO
doubt is not resolved

i have asked how to delete that item

#11

@anandprakash1091971 just add this in your click method

.click((event) => {
    event.stopPropagation();
    console.log(event.target)
    event.target.closest('li').remove()
})

event.target gives the element on which this click event is registered and then we are finding the closest li element so that we can remove it from the DOM

#12

thankyou very much
:hugs: