Delete checkbox containing row in form of html

Question

<script>
function delBoxes(){
    var boxes = document.getElementsByClassName('chk');
    var texts = document.getElementsByClassName('txt');
    for(var i = 0; i<boxes.length; i++){
        box = boxes[i];
        txt = texts[i];
        if(box.checked){
            box.parentNode.removeChild(box);
            txt.parentNode.removeChild(txt);
        }
    }
}
</script>

<html>  

<body>
<form action="" method="post">
<table border="1" id="table">  
   <tr>  <td colspan="2">Select Technolgy:</td>   </tr>  
   <tr>  <td>c</td>  
      <td><input type="checkbox" name="techno[]" value="c" class='chk'></td>  
   </tr>  
   <tr>  <td>hadoop</td>  
      <td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>  
   </tr>  
   <tr>   <td>core java</td>  
      <td><input type="checkbox" name="techno[]" value="Core JAVA"  class='chk'></td>  
   </tr>  

<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>


</body>  
</html>

Using this code, I candelete the checked checkbox. But how can I remove the checked checkbox containing row of table in the form?

I've read through this question, but it didn't help me.

If i use for this delete jquery library then load will increase for my server to load javascript and juery also to avoid that i am trying in javascript only — user28536, Jun 26 '16 at 05:07

Mike S · Answer 1 · 2016-06-25T22:01:45.820

Editing your code you can do it like this

function delBoxes() {
  var boxes = document.getElementsByClassName('chk');
  var texts = document.getElementsByClassName('txt');
  for (var i = 0; i < boxes.length; i++) {
    box = boxes[i];
    if (box.checked) {
      rowTag = box.parentNode.parentNode;
      tableTag = box.parentNode.parentNode.parentNode;
      tableTag.removeChild(rowTag);
    }
  }
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);

<form action="" method="post">
  <table border="1" id="table">
    <tr>
      <td colspan="2">Select Technolgy:</td>
    </tr>
    <tr>
      <td>c</td>
      <td>
        <input type="checkbox" name="techno[]" value="c" class='chk'>
      </td>
    </tr>
    <tr>
      <td>hadoop</td>
      <td>
        <input type="checkbox" name="techno[]" value="hadoop" class='chk'>
      </td>
    </tr>
    <tr>
      <td>core java</td>
      <td>
        <input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
      </td>
    </tr>

    <input type="button" value="Click" id="btntest" />
    <input type="checkbox" class='chk' />and
    <input type="text" class='txt' />
    <input type="button" id="deleteButton" value="Delete checked boxes" />
</form>

But you have to consider changing design to something better. Set ids or classes and refer to them, instead of relative "magic number of levels".

If you mark rows with data-tech attribute then you could do something like:

    function delBoxes() {
        var classname = document.getElementsByClassName("chk");
        for (var i = 0; i < classname.length; i++) {
          box = classname[i]
          if (box.checked) {
            elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
            elements[0].parentNode.removeChild(elements[0]);
          }
        }
      }

      document.getElementById("deleteButton").addEventListener("click", delBoxes);

<form action="" method="post">
  <table border="1" id="table">
    <tr>
      <td colspan="2">Select Technolgy:</td>
    </tr>
    <tr data-tech="c">
      <td>c</td>
      <td>
        <input type="checkbox" name="techno[]" value="c" class='chk'>
      </td>
    </tr>
    <tr data-tech="hadoop">
      <td>hadoop</td>
      <td>
        <input type="checkbox" name="techno[]" value="hadoop" class='chk'>
      </td>
    </tr>
    <tr data-tech="Core JAVA">
      <td>core java</td>
      <td>
        <input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
      </td>
    </tr>

    <input type="button" value="Click" id="btntest" />
    <input type="checkbox" class='chk' /> and
    <input type="text" class='txt' />
    <input type="button" id="deleteButton" value="Delete checked boxes" />
</form>

can you once explain how the below lines working in the $checkbox1=$_POST['techno']; $chk=""; foreach($checkbox1 as $chk1) { $chk .= $chk1.""; echo ''; } — user28536, Jun 26 '16 at 06:29
can you visit this http://stackoverflow.com/questions/38035870/can-i-able-to-write-with-out-issetpost-for-the-below-code — user28536, Jun 26 '16 at 06:50
provided code stores selected value (one value or array) into `$checkbox1` and then iterate through that array and write "alert" as much times as you had elements. Generally I am not happy that server side script writes inline javascript and alert something. — Mike S, Jun 26 '16 at 09:10

Delete checkbox containing row in form of html

1 Answers1