CODEWITHSUNDEEP
javascriptjquery
Jesse Schokker
Jesse Schokker

Reputation: 896

Javascript complicated append and updating DOM so it able to be removed with remove();

I have a small problem, I am trying to remove an appended table row. Whenever the user clicks .removeRow, which activates the function removeCustomSetting()

The table row isn't removed after clicking the button. I think it is because the append function doesn't update the DOM.

I tried many things such as updating the DOM element, which wasn't an success.

If someone knows how to fix this, I would really appriciate that :)

Our table row

<tbody id="customSettingsTableContent">
    <tr id="settingRow_265"><td>ertert</td><td>17-03-2016&nbsp;19:19:59</td><td><a style="cursor:pointer;" class="removeRow" onclick="removeCustomSetting('265','p3rstuxgq7');"><li class="fa fa-close"></li></a></td></tr>
</tbody>

Here we remove the row by id (like this settingRow_265 ) in the table. Every ID is unique in the table, as it is pulled from an Auto increment in the database.

   function removeCustomSetting(settingId, inputId) {
    $.post("", { action: "removeCustomSetting", settingId: settingId, inputId: inputId },
        function(data,status){ 
            if(status=='success') { 

                $("#settingRow_" + settingId + "").remove(); 
                    var countCustomSettingRow = $('#customSettingsTable tr').length-1; 

                        if(countCustomSettingRow<1) { $("#customSettingsTableContent").html("<tr><td>No custom settings found...</td><td></td><td></td></tr>"); }

            } 
        }                                       
        );
    }

Here we add the row to the table after submitting and getting JSON data back.

      function addCustomSetting(inputId) {
            customSettingName = $('input[name=customSettingName]').val(); 
                if(!customSettingName) { alert("Can't be empty"); } else {
                    alert("OK "+ customSettingName +"");

                        $.post("", { action: "addCustomSetting", customSettingName: customSettingName, inputId: inputId },

                        function(data,status){ 

                            var return_addCustomSettingResponse = jQuery.parseJSON(data);

                        alert("success " + data + "");

                        $("#customSettingsTableContent").html("<tr><td>" + return_addCustomSettingResponse.name + "</td><td>" + return_addCustomSettingResponse.date + " " + return_addCustomSettingResponse.time + "</td><td>" + return_addCustomSettingResponse.inputId + "<a style=\"cursor:pointer;\" onclick=\"removeCustomSetting('" + return_addCustomSettingResponse.id + "','" + return_addCustomSettingResponse.inputId + "');\"><li class=\"fa fa-close\"></li></a></td></tr>");


                   }                                            
               );
           }
       }

Upvotes: 0

Views: 63

Answers (2)

mike tracker
mike tracker

Reputation: 1061

Try this,

function addCustomSetting() {

  $('.noRecords').remove();
  var staticHtml = '<tr> <th scope="row">' + $('#customSettingsTableContent tr').length + '</th> <td>new name</td><td>new last name</td><td> <a href="#" onclick="removeCustomSetting(event)"> <div class="fa fa-close"></div></a> </td></tr>';

  $('#customSettingsTableContent').append(staticHtml);

}



function removeCustomSetting(event) {
  var t = $('#customSettingsTableContent tr').eq(0).find('th').length;
  event.target.closest('tr').remove(); // you will only need this line of code

  if ($('#customSettingsTableContent tr').length == 1) {
    $('#customSettingsTableContent').append('<tr class="noRecords"> <td colspan="' + t + '">No More Records!</td></tr>')

  }

}
a .fa {
  width: 2em;
  height: 2em;
  display: inline-block;
  cursor: pointer;
  background: #eee;
  text-align: center;
  line-height: 2;
}
a:hover .fa {
  background: #FFC107;
}
body {
  padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<button type="button" onclick="addCustomSetting()" class="btn btn-primary">
  <div class="fa fa-plus"></div>
</button>

<table id="customSettingsTableContent" class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>

        <a href="#" onclick="removeCustomSetting(event)">
          <div class="fa fa-close"></div>
        </a>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>

        <a href="#" onclick="removeCustomSetting(event)">
          <div class="fa fa-close"></div>
        </a>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>

        <a href="#" onclick="removeCustomSetting(event)">
          <div class="fa fa-close"></div>
        </a>
      </td>
    </tr>
  </tbody>
</table>

hope this helps..:)

Upvotes: 1

Kevin B
Kevin B

Reputation: 95028

You forgot to give the table rows ID's in the way your sample html has.

$("#customSettingsTableContent").html("<tr><td>" + return_a

Once an id is added, it should begin working again. However, it would be even easier if you just stopped using onclick attributes. Give the anchor tag a class of delete-custom-setting, then use this (only once, not within an event handler or function.) Also, remove the onclick attribute.

$("#customSettingsTableContent").on('click', '.delete-custom-setting', function () {
    var thisRow = $(this).closest('tr');
    var siblings = thisRow.siblings();
    thisRow.remove();
    if (siblings.length === 0) {
        $("#customSettingsTableContent").html(...no more content etc...);
    }
});

Also note that you may want to be using .append, because otherwise you'll never have more than one row in this section.

Upvotes: 1

Related Questions