Удаление, содержащее строку щелкнутого td JQuery

Я пытаюсь управлять своей таблицей HTML, добавлять и удалять строки. То, что я пытаюсь сделать, - удалить целую строку, щелкнув элемент(). Тем не менее, при щелчке элемента родители всех тегов удаляются. существует ли какой-либо способ указать элемент с щелчком и удалить только строку, содержащую этот элемент, специально для этого типа настраиваемых таблиц, где строки могут быть добавлены и удалены.Удаление, содержащее строку щелкнутого td JQuery

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("td").click(function(){ 
 
    $("td").parentsUntil("table").remove(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 

 
<body> 
 
    <table border="1"> 
 
    <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr> 
 
    <tr><td>test5</td><td>test6</td><td>test7</td><td>test8</td></tr> 
 
    </table> 
 
</body> 
 

 
</html>

источник

2016-07-26 Sahar Alsadah

Вы должны пройти к ближайшему т.р. элемента в обработчик щелчка, а затем удалить его. Для этого нужно, чтобы объект Jquery из щелкнули элемента вместе с .closest() или .parent() селектор:

$("td").click(function(){ 
     $(this).closest("tr").remove(); 
});

Рабочая Snippet:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("td").click(function(){ 
 
     $(this).closest("tr").remove(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 

 
<body> 
 
    <table border="1"> 
 
    <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr> 
 
    <tr><td>test5</td><td>test6</td><td>test7</td><td>test8</td></tr> 
 
    </table> 
 
</body> 
 

 
</html>

источник

2016-07-26 06:42:09

Очень полезно. Огромное спасибо. –

@SaharAlsadah: рад, что это помогает :) –

Это делается для таблицы фиксированного размера. Но когда я добавляю и добавляю строку, она не выполняет задания для дополнительных строк. Любая идея почему? –

Да, есть. Просто выберите родителя этого элемента <td>; это будет <tr>.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("td").click(function(){ 
 
     $(this).parent().remove(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 

 
<body> 
 
    <table border="1"> 
 
    <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr> 
 
    <tr><td>test5</td><td>test6</td><td>test7</td><td>test8</td></tr> 
 
    </table> 
 
</body> 
 

 
</html>

источник

2016-07-26 06:42:34 nicael

Отлично. большое спасибо –

Удаление, содержащее строку щелкнутого td JQuery

ответ

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