how to delete element from list in jquery?

Question

I am trying to make a simple list using JavaScript and jQuery. I am using oops concept of JavaScript. I am able to add new element in list. I am facing one problem, I have two buttons to update and delete the row. I created an array in which I have all the objects. I wanted if user click on delete button it deletes from array, as well as from the list. Same if user update the item it should also get updated in the array and list

I tried doing like this

https://jsfiddle.net/0dky3txz/3/

function Phonebook(){
    this.phoneBookArray=[];
    var defaultvalue= [{name:"abc",phonenumber:989123},{name:"pqr",phonenumber:9891462}]
    this.phoneBookArray=defaultvalue;
    console.log(this.phoneBookArray)
   }
Phonebook.prototype.addItem=function(username,phoneNumber){
    this.phoneBookArray.push({name:username,phonenumber:phoneNumber})
    this.displayItem();
}

Phonebook.prototype.displayItem=function(){
    $("#phonelist").html('');
    for(var i=0;i<this.phoneBookArray.length;i++){
        $("#phonelist").append('<li><span>'+this.phoneBookArray[i].name+'</span><span>'+       this.phoneBookArray[i].phonenumber+'</span><span><button class="del">delete</button></span><span><button class="update">update</button></span></li>')
    }
}

var phonedir=new Phonebook();
phonedir.displayItem();
$('#addItem').click(function(){

    var name=$('#nameEdit').val();
     var phone=$('#numberEdit').val();

    if(name!=''&& phone!=""){
       phonedir.addItem(name,phone);
        $('#nameEdit').val('');
        $('#numberEdit').val('');
    }else{
     alert('please enter number and name')   
    }

})


$('.del').click(function(){
    //try to delete item from list as well as from phoneBookArray
   console.log($(this).parent('li'))

})

$('.update').click(function(){
    //try to update item from list as well as from phoneBookArray

    // try to get selected item and fill on text field and update the list
   //console.log($(this).parent('li'))

})

user944513 you can get the js example from here: https://jsfiddle.net/caseypharr/x8mm033h/ — Casey ScriptFu Pharr, Oct 19 '15 at 03:39
This type of stuff is best handled though with something like Knockout or my favorite, jsViews. But can manually be done too as shown above. — Casey ScriptFu Pharr, Oct 19 '15 at 03:40
I just copy pasted everything in the fiddle JS content, to get around the closing of the question and get you an example. Did you just plug and play the js code only into your code you have? — Casey ScriptFu Pharr, Oct 19 '15 at 03:48
@Casey you are doing like giving the id..there may be a problem if user write same name then two user have same id which not possible in dom — user944513, Oct 19 '15 at 03:48
I see whats wrong, so typo and late. Let me fix it. Give me a sec — Casey ScriptFu Pharr, Oct 19 '15 at 03:53
There now check out the fiddle link i posted. I made the object global, to preserve the state of it. I also changed the way you are binding. If you bind the way you were, new items added to dom later are not bound. By using the document.on, you bind to all future items with that selector. — Casey ScriptFu Pharr, Oct 19 '15 at 04:04
You could write this all a little different, but for how you had it setup, I corrected it to fit your current code. Copy my js from that fiddle, and use it in your code. Then see the idea I did it with. Change to how ever you want. Let ,e know if that is what you needed. — Casey ScriptFu Pharr, Oct 19 '15 at 04:05
Also, caseypharr@outlook.com if you have any other questions beyond this page. Sick of talking in the commenst section. Lol Happy coding — Casey ScriptFu Pharr, Oct 19 '15 at 04:06
@ArunPJohny "Event binding" , "dynamically created elements?" not appear at text of Question ? — guest271314, Oct 19 '15 at 04:09
@user944513 : here take this. https://jsfiddle.net/norlihazmeyGhazali/pg97qcg2/ — Norlihazmey Ghazali, Oct 19 '15 at 04:40
@ArunP Johny This question problems not focused on event binding dynamically content at all but how to implement delete functionality and at the same time having dynamic content that need event delegation. — Norlihazmey Ghazali, Oct 19 '15 at 04:43

how to delete element from list in jquery?

0 Answers0