CODEWITHSUNDEEP
javascriptjquerycsshtml
user6015171
user6015171

Reputation:

delete button its deleting all the values

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();
 });

Upvotes: 0

Views: 159

Answers (1)

Greg Borbonus
Greg Borbonus

Reputation: 1384

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

Upvotes: 3

Related Questions