why am I not able to add input text into my table?

Question

I am trying to add in text that the user types into the input and have it be added into my table as with a button that removes the item here is my html code:

<table id="proxy-list">
    <tr>
      <!--<th>Name</th> -->
      <th colspan="3">Proxies</th>
    </tr>
    <tr>
      <td>Proxy1:</td>
      <td>174.32.116.214:87</td>
      <td>
        <button class="remove-btn"><div class="thex">x</div></button>
      </td>
     </tr>
  </table>
  <input type="text" id="proxy-add-name" placeholder="Name"></input>
  <input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
  <button type="submit" id="proxy-add" onclick="addProxy()">Add</button>

and here is the javascript code I tried that isn't working

function addProxy() {
    var proxyName = $('#proxy-add-name').val();
    var proxy = $('#proxy-add-proxy').val();
    $('#proxy-list').append('<tr>'
        +'<td>'+proxyName+'</td>'
        +'<td>'+proxy+'</td>'
        +'<button class="remove-btn"><div class="thex">x</div></button>'
        +'</tr>');
}

$(function(){
  $('#proxy-add').click(function(){
    addProxy();
    return false;
  });
});

Any Idea why this isnt working? and how would I add in the text with the remove button so that when I click the button it removes the text?

Any Help is appreciated thank you.

Answer 1

Looks like everything works:

1. Deleted onclick , only jQuery handler left.
2. Wrapped button in <td> .
3. Changed button#proxy-add type to button .

Note 1. Html table may only contain tr's . tr may only contain td's

Note 2. Using submit be sure that page is not reloaded.

 function addProxy() { var proxyName = $('#proxy-add-name').val(); var proxy = $('#proxy-add-proxy').val(); $('#proxy-list').append('<tr>' +'<td>'+proxyName+'</td>' +'<td>'+proxy+'</td>' +'<td><button class="remove-btn"><div class="thex">x</div></button></td>' +'</tr>'); } $(function(){ $('#proxy-add').click(function(){ addProxy(); return false; }); $('body').on('click', '.remove-btn', function(){ $(this).parent().parent().remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="proxy-list"> <tr> <!--<th>Name</th> --> <th colspan="3">Proxies</th> </tr> <tr> <td>Proxy1:</td> <td>174.32.116.214:87</td> <td> <button class="remove-btn"><div class="thex">x</div></button> </td> </tr> </table> <input type="text" id="proxy-add-name" placeholder="Name"></input> <input type="text" id="proxy-add-proxy" placeholder="Proxy"></input> <button type="button" id="proxy-add">Add</button> 

Answer 2

first of all you need to remove the event handler from the button tag for two reasons: to NOT fire the addProxy() function twice and, second, because inline event handlers are really bad practice i really ask you to avoid using them.

<table id="proxy-list">
    <tr>
      <!--<th>Name</th> -->
      <th colspan="3">Proxies</th>
    </tr>
    <tr>
      <td>Proxy1:</td>
      <td>174.32.116.214:87</td>
      <td>
        <button class="remove-btn"><div class="thex">x</div></button>
      </td>
     </tr>
  </table>
  <input type="text" id="proxy-add-name" placeholder="Name"></input>
  <input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
  <button type="submit" id="proxy-add">Add</button>

Your addProxy() function works correctly, it just need to add a unique identifier to each new tr and to do that I give each tr a data-id attribute that would be calculated by the script to make it unique, for now and for simplicity, an integer that increment each click would suffice. You only need now how to make the remove buttons functional. Here's the new addPtoxy() function:

function addProxy(id) {

    var proxyName = $('#proxy-add-name').val();
    var proxy = $('#proxy-add-proxy').val();
    $('#proxy-list').append('<tr data-id="id-' + id + '">'
        +'<td>'+proxyName+'</td>'
        +'<td>'+proxy+'</td>'
        +'<td><button class="remove-btn" data-target="id-' + id + '"><span class="thex">x</span></button></td>'
        +'</tr>');
}

and for the click handler:

$('#proxy-add').click(function(){
    addProxy(id++);
    return false;
});

Ps: the id variable must be global and equals to 0 for example.

And for the remove process i'll make it as an anonymous function directly in the click handler:

$('body').on('click', 'button.remove-btn', function(){
    $('tr[data-id="'+$(this).data('target')+'"]')[0].remove();
    return false;
});

Ps: here we have to use the .on method and attach the event to the body and to specify the second argument as button.remove-btn because we're working with dynamically added elements.

Answer 3

 $(function() { function addProxy() { var proxyName = $('#proxy-add-name').val(); var proxy = $('#proxy-add-proxy').val(); var html = '<tr>'; html += '<td>'+proxyName+'</td>'; html += '<td>'+proxy+'</td>'; html += '<td>'; html += '<button class="remove-btn"><div class="thex">x</div></button>'; html += '</tr>'; $('#proxy-list-body').append(html); } function resetProxyInputs() { $('#proxy-add-name').val(''); $('#proxy-add-proxy').val(''); } $('#proxy-add').on('click', function(event) { addProxy(); resetProxyInputs(); }); $('#proxy-list').on('click', '.remove-btn', function(evnet) { var $removeButton = $(this); $removeButton.closest('tr').remove(); }); }); 

 #proxy-list { position: absolute; top: 15%; left: 60%; border: 5px solid #e83737; border-collapse: collapse; } th { height: 50px; border: 5px solid #e83737; text-align: center; } th, td { color: #4F8AFF; } td { height: 180px; padding-bottom: 140px; padding-left: 20px; padding-right: 10px; text-align: left; } .remove-btn { width: 20px; height: 20px; background-color: #4F8AFF; border: 2px solid #4F8AFF; border-radius: 10px; } .thex { color: white; position: relative; top: -1.203px; left: -0.8px; } #proxy-add-name, #proxy-add-proxy { position: relative; top: 245px; left: 60.5%; height: 26.5px; background-color: transparent; border: 2px solid #e83737; border-left: none; border-bottom: none; color: #4F8AFF; } #proxy-add-name { width: 90px; } #proxy-add-proxy { width: 157px; border-right: none; left: 60%; } #proxy-add { position: absolute; top: 290px; left: 84.8%; width: 37px; height: 26px; background-color: #e83737; border: 2px solid #e83737; color: white; } 

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <table id="proxy-list"> <thead> <tr> <th colspan="3">Proxies</th> </tr> </thead> <tbody id="proxy-list-body"> <tr> <td>Proxy1:</td> <td>174.32.116.214:87</td> <td> <button class="remove-btn"><div class="thex">x</div></button> </td> </tr> </tbody> </table> <input type="text" id="proxy-add-name" placeholder="Name" /> <input type="text" id="proxy-add-proxy" placeholder="Proxy" /> <button type="submit" id="proxy-add">Add</button> </body> </html>