dynamically removing particular data from json table

Question

  var movies = [{
    "title": "The GodFather",
    "genre": "Drama",
    "year": "1978",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "Superbad",
    "genre": "Comedy",
    "year": "1995",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "The Departed",
    "genre": "Drama",
    "year": "2000",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "The devil",
    "genre": "comedy",
    "year": "2003",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "mummy returns",
    "genre": "horrer",
    "year": "2010",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }];

  function dltRow(control) {

    document.getElementById("mytable").deleteRow(this);

  }

  $(document).ready(function() {
    for (var i = 0; i < movies.length; i++) {
      var x = '<tr><td>' + movies[i].title + "\n" + '</td><td>' + movies[i].genre + "\n" + '</td><td>' + movies[i].year + "\n" + '</td><td class="show"><button>' + movies[i].button + "\n" + '</button></td><td onclick=\"dltRow(this)\"><button>' + movies[i].dlt + "\n" + '</button></td></tr>';
      $('#mytable').append(x)
    };
    $('.show').click(function() {
      res = $(this).closest('tr').text();
      alert(res);
    })
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<body>
  <h1>MOVIES LIST</h1>
  <table id="mytable">
  </table>
</body>

</html>

hi i have created html table from json data using jquery... in my table there are 2 buttons show and delete...if i click show it should show current row details in alert box.. it is displaying..but it is displaying along with show and delete button.. i want to remove that show and delete button.. how to do it.. please anyone help me??..

That's not [JSON](http://www.json.org/): [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — Andreas, Dec 08 '16 at 06:56

score 1 · Accepted Answer · answered Dec 08 '16 at 06:56

Remove the button from the selected elements:

var movies = [{
  "title": "The GodFather",
  "genre": "Drama",
  "year": "1978",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "Superbad",
  "genre": "Comedy",
  "year": "1995",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "The Departed",
  "genre": "Drama",
  "year": "2000",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "The devil",
  "genre": "comedy",
  "year": "2003",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "mummy returns",
  "genre": "horrer",
  "year": "2010",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}];

function dltRow(control) {

  document.getElementById("mytable").deleteRow(this);

}

$(document).ready(function() {
  for (var i = 0; i < movies.length; i++) {
    var x = '<tr><td>' + movies[i].title + "\n" + '</td><td>' + movies[i].genre + "\n" + '</td><td>' + movies[i].year + "\n" + '</td><td class="show"><button>' + movies[i].button + "\n" + '</button></td><td onclick=\"dltRow(this)\"><button>' + movies[i].dlt + "\n" + '</button></td></tr>';
    $('#mytable').append(x)
  };
  $('.show').click(function() {
    res = $(this).closest('tr').clone().find('button').remove().end().text();//clone the element after that select the buttons using find then remove them, use end to go back to the cloned element(now without the buttons) to get the text 
    alert(res);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<body>
  <h1>MOVIES LIST</h1>
  <table id="mytable">
  </table>
</body>

</html>

dynamically removing particular data from json table

1 Answers1