Delete button next to each array's value

Question

I have a HTML-JavaScript script in which the user can insert data to a new array [] by using a form's text field and an insert button.

By pressing insert button, the user inserts the data typed into the array.
I have a function which prints all the values of the array into <p id="demo"></p> and runs itself every 100 milliseconds in order to be updated with the arrays values.
I also have a reset button to delete every array's value when clicked.

What I want to do is add a delete button next to each array's value in order to be easier for the user to delete the wrong value he inserted.

I am using this code to insert values and print them:

HTML:

<div align="center">
    <form id="form1">
        <input type="text" name="fname" id="fname" placeholder="Type here!">
    </form>
    <br>
    <input type="button" id="Button Insert" onclick="myFunction()" value="Insert">
    <input type="button" onclick="myFunction3()" value="Reset">
</div>
<p id="demo" align="center"></p>

JavaScript/JQuery:

var all_values =[];

function myFunction() {
    var temp_val = $("#fname").val();
    all_values.push(temp_val);
    document.getElementById("form1").reset();
}

setInterval(function () {
    $("#demo").html(all_values.join("<br>"));
}, 100);

function myFunction3() {
    all_values.length = 0; 
}

To be more specific I want something like these things: iOS example JSFiddle Example 1 JSFiddle Example 2.

Could you please help me? Thanks in advance.

Do you have a working example with your code, where the values are inserted etc — adeneo
– adeneo, Commented Jun 7, 2015 at 14:43
Here is the full code: pastebin.com/jBSscbch . You can run it everywhere you want. Thanks. — Oluderi
– Oluderi, Commented Jun 7, 2015 at 14:54
Do you need that array for anything else? Or you just use it do display the values as a HTML? — Artur Filipiak
– Artur Filipiak, Commented Jun 7, 2015 at 15:06

Artur Filipiak · Accepted Answer · 2015-06-07 15:33:02Z

I'd do it the other way around.

Remove setInterval as it's really bad way to do such things.
Remove white spaces from the id attribute (id="Button-Insert", not id="Button Insert")
Don't use onclick attributes. Instead, register click event handlers with jQuery

// caching is a good practice when you reffer to the same elements multiple times:
var all_values =[], demo = $("#demo"), form = $("#form1")[0], fname = $("#fname");

$('#Button-insert').click(function(){
    var temp_val = fname.val();
    all_values.push(temp_val);
    // create delete button along with the value
    demo.append('<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>');
    form.reset();
});

$('#Button-reset').click(function(){
    all_values = []; 
    demo.html('');
});

// event delegation for dynamic elements:
demo.on('click', '.del-btn', function(){
    all_values.splice(all_values.indexOf($(this).val()), 1);
    $(this).parent().remove();
});

JSFiddle

oscargilfc · Accepted Answer · 2015-06-07 15:30:20Z

0

Simply create the delete buttons at the same time you create the table.

 function loadvalues(){
  var i, button; 
  $('#demo').empty();
  for(i in all_values){
      $('#demo').append(all_values[i]);
      button = $('<button>',{'text':'Delete'}).click(function(){
           all_values.splice(this,1);
           loadvalues();
      }.bind(i)).appendTo('#demo');
      $('#demo').append('<br>');
   }
 }

Also you don't need to poll, you could simply add each one on demand with a function like this:

 function addVal(){
     var val = $("#fname").val(), i = all_values.length;
     all_values.push(val);

     $('#demo').append(val);
     button = $('<button>',{'text':'Delete'}).click(function(){
            all_values.splice(this,1);
            loadvalues();
    }.bind(i)).appendTo('#demo');
    $('#demo').append('<br>');
 }

I had some typos, the code works, Check here: http://codepen.io/anon/pen/QbvgpW

edited Jun 7, 2015 at 15:30

answered Jun 7, 2015 at 15:03

oscargilfc

3391 silver badge12 bronze badges

1 Comment

Oluderi Over a year ago

Unfortunately I tried your solution but it didn't work (here is the full code if you want to try it cause I may have done a mistake: pastebin.com/jBSscbch). Also, all_values.length = 0; is refering to the reset button which deletes all values from the array. Note that I have to use an array [] cause I need it for something else too. Thanks for your help.

Collectives™ on Stack Overflow

Delete button next to each array's value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related