Удалить флажок, содержащий строку в виде HTML

<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>

Используя этот код, я CanDelete проверенное флажок. Но как я могу удалить установленный флажок, содержащий строку таблицы в форме?

Я прочитал this question, но это меня не помогло.

источник

2016-06-25 user28536

Если я использую для этого удаления библиотеки Jquery, то нагрузка будет увеличиваться для моего сервера для загрузки яваскрипт и juery также, чтобы избежать того, что я пытаюсь только в javascript – user28536

Редактирование кода вы можете сделать это, как этот

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>

Но вы должны рассмотреть вопрос об изменении дизайна к чему-то лучшему. Задайте идентификаторы или классы и обратитесь к ним вместо относительного «магического количества уровней».

Если пометить строки с data-tech атрибутом, то вы могли бы сделать что-то вроде:

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>

источник

2016-06-25 21:36:45

Можете ли вы как-то объяснить, как нижние строки работают в $ checkbox1 = $ _ POST ['techno']; $ chk = ""; foreach ($ checkbox1 as $ chk1) { $ chk. = $ Chk1. ""; \t echo ''; } – user28536

Вы можете посетить этот http://stackoverflow.com/questions/38035870/can-i-able-to-write-with-out-issetpost-for-the-below-code – user28536

, если код хранит выбранное значение (один значение или массив) в '$ checkbox1', а затем перебирать этот массив и записывать« предупреждение »столько раз, сколько у вас были элементы. Вообще-то я недовольна тем, что скрипт на стороне сервера записывает встроенный javascript и предупреждает что-то. –

Удалить флажок, содержащий строку в виде HTML

ответ

Смежные вопросы