delete button its deleting all the values

Question

When I click the delete button, it's deleting all the values. Is it possible to delete each value?

I'm providing the code below:

http://codepen.io/anon/pen/grRKEz?editors=1010

$('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    var name = $('#name').val();
    var message = $('#message').val();
    var div = "<div><span>"+name+"</span><span >"+email+"</span><span>"+message+"</span><input type='button' value='Edit' name='editHistory'><input type='button' value='Delete' name='deleteHistory'></div>";  //add your data in span, p, input.. 
    //alert(div);

    $('.gettingValues').append(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form 
    localStorage.clear();
 });

Your delete button is inserting brand new HTML into your 'gettingValues' div. Which has the effect of overwriting all existing html in the div, not just overwriting the line you are attempting to delete. — Brian
I am still rather unsure about what your intent is for the delete button to accomplish — Brian
@Brian i need to implemete delete functionality for each items — user6015171

Greg Borbonus Greg Borbonus · Accepted Answer · 2016-03-28T02:17:06

Since the form is appending the information wrapped in a div to your "gettingValues" div, then you can just delete the parent element.

Like this:

$('.gettingValues').on('click', "input[name='deleteHistory']", function() {
  //var div = "getting form values<input data-name='edit' type='button' value='Edit' name='editHistory'><input data-name='delete' type='button' name='deleteHistory' value='Delete'>"; //No need for this line.
  console.log("Data deleted");
  //$('.gettingValues').html(div); //Don't reset the html.
  if($(this).parent().hasClass('gettingValues')) return false; //Don't remove the container.
  $(this).parent().remove(); //Remove the containing div only.
  //deleteHistoryAPI(data);

});

Check out: http://codepen.io/gborbonus/pen/grRjjy?editors=1011

delete button its deleting all the values

1 Answers