Question

How do remove a div by clicking on it, but hide or display any of the divs with name or age in the ID.

One checkbox should toggle any divs with “name” at the beginning of the ID, and another checkbox should toggle any divs with “age”at the beginning of the ID

<div id="container">
  <div id="name-254"></div>
  <div id="age-645"></div>
  <div id="name-142"></div>
  <div id="name-341"></div>
  <div id="age-341"></div>
  <div id="name-341"></div>
</div>

Answer 1

In order to make the div elements self-destruct when you click on them you could do the following:

// Inside the #container, when somebody clicks a div
$("#container").on("click", "div", function(){
   // Remove that div
   $(this).remove(); 
});​​​​​

As for checkboxes that toggle the visibility of each set:

// When somebody clicks on a checkbox
$(":checkbox").on("click", function(){
    // Reference for the checkbox, its name, and checked property (true|false)
    var chbx = $(this),
        name = chbx.attr("name"), 
        show = chbx.prop("checked");

    // Find elements whose id begins with the checkbox name
    // and set their toggle to true or false
    $("[id^=" + name + "]").toggle( show );
});

See it in action here: http://jsfiddle.net/6GBpW/3/