Удалить строку таблицы, используя parent.removeChild (child)

У меня есть таблица, которая начинается пустым, когда пользователь открывает страницу и имеет строки, добавленные к ней пользователем. Пользователь выполняет поиск в базе данных и результаты отображаются в таблице «Результаты поиска» с приведенным ниже кодом.Удалить строку таблицы, используя parent.removeChild (child)

while ($dbsearch = mysqli_fetch_assoc($run_query)) 
     { 
      $dbu = $dbsearch['Username']; 
      $id = $dbsearch['PlayerID']; 
      $func = "add(" . $id . ", Brad Henry)"; 
     array_push ($_SESSION['players'],$dbsearch['PlayerID']); 
     echo "<tr><td>".$id ."</td><td>".$dbu."</td><td><input type=\"submit\" id=\"PlayerAdded".$id."\" value=\"Add\" onclick=\"add('".$id."','".$dbu."');\"></input></td></tr>"; 
     }

Это работает очень хорошо. Когда пользователь нажимает кнопку добавить, следующая функция добавляет результат поиска в таблице «сегодняшними событие»:

function add(id,name){ 
    var t = ("</td><td>"); 
    var str = ("<tr id='Players" + id + "'><td>") 
    var ctr = ("</td></tr>") 
    var place = ("<select name='place'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>") 
    var points = ("<input name='points' placeholder='50'></input>"); 
    var cash = ("$<input name='cash' placeholder='0'></input>"); 
    var ticket = ("<select name='ticket'><option value='No'>No</option><option value='Yes'>Yes</option>"); 
    var del = ("<input type='submit' value='Delete' onclick='remove(" + id + ")'> </input>") 

    $('#PlayerAdded').before(str+ id + t + name + t + place + t + points + t + cash + t + ticket + t + del + ctr); 
}

Моя проблема заключается в том, что ничего не происходит, когда кнопка Delete (см вар-дель) нажата. var del вызывает функцию «Удалить», которая вставлена ниже. Я не уверен, где ошибка, и я искал онлайн для ответа, но безрезультатно. Интересно, если я заявляю var child неправильно, как это выглядит для elementID как с строки и междунар ...

function remove(RowID) { 
    var parent = document.getElementById("resultTable"); 
    var child = document.getElementById("Players" + RowID); 
    parent.removeChild(child); 
}

источник

2015-08-29 Tunna182

Почему не просто 'child.parentElement.removeChild (child);'? – Jan

Нет необходимости выбирать родительский элемент, вы можете сделать это, используя ** element.parentNode.removeChild (element) ** – Rayon

@Jan это здорово! Спасибо, я новичок в JS и все еще кучу, чтобы узнать об этом, я только начинаю обнимать DOM .. Еще раз спасибо. Если вы введете это в качестве ответа, я с радостью помету его, чтобы вы получили очки репутации: D – Tunna182

Ваш код создает недопустимый HTML-разметку. Удалите элементы, отмеченные **, и добавьте элементы, помеченные как ++. Я использовал значение 10 как идентификатор внутри вашего кода.

<table> 
     <tr id='Players10'> 
    <td>10</td> 
    <td></td> 
    <td><select name='place'> 
     <option value='17'>17th</option> 
     <option value='16'>16th</option> 
     <option value='15'>15th</option> 
     <option value='14'>14th</option> 
     <option value='13'>13th</option> 
     <option value='12'>12th</option> 
     <option value='11'>11th</option> 
     <option value='10'>10th</option> 
     <option value='9'>9th</option> 
     <option value='8'>8th</option> 
     <option value='7'>7th</option> 
     <option value='6'>6th</option> 
     <option value='5'>5th</option> 
     <option value='4'>4th</option> 
     <option value='3'>3rd</option> 
     <option value='2'>2nd</option> 
     <option value='1'>1st</option> 
     </select></td> 
    <td><input name='points' placeholder='50'> 
     **</input>**</td> 
    <td>$ 
     <input name='cash' placeholder='0'> 
     **</input>**</td> 
     <td> 
     <select name='ticket'> 
    <option value='No'>No</option> 
    <option value='Yes'>Yes</option> 
++</select>++ 
     </td> 
     <td> 
     <input type='submit' value='Delete' onclick='remove(10)'> 
     **</input>** 
     </td> 
     </tr> 
</table>

Затем проверьте свой код еще раз.

источник

2015-08-29 09:27:15 jeff

Удалить строку таблицы, используя parent.removeChild (child)

ответ

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