remove() jquery [Архив форума]

Просмотр полной версии : remove() jquery

Officeoff.ru

11.01.2015, 15:35

Всем доброго времени суток. Возник вопрос.
Есть html код:

<div class='taber visible' id='one'>
<div class='str' style='position: relative;'>
Первая вкладка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='two'>
<div class='str' style='position: relative;'>
Вторая вкладка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='three'>
<div class='str' style='position: relative;'>
Третья вкладка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>

Есть также js код, который удаляет строку или точнее div class='str'.

$('#inner_base').on('click', '.str', function(){
$(this).closest(".str").hide();
});

Проблема в том, что скрипт удаляет строку только в той вкладке где мы на нее нажимаем. А хотелось бы удалить строку в каждой из вкладок. Как это можно сделать?

danik.js

11.01.2015, 16:16

А где тут remove()?
$('.str').remove()

Officeoff.ru

11.01.2015, 20:39

Ок. Давайте сделаем $(this).closest(".str").remove();
Это не особо меняет суть вопроса.

danik.js

11.01.2015, 20:40

Так предложенный вариант чем не устроил?

Officeoff.ru

12.01.2015, 13:52

Ой, забыл написать про это.
Этот вариант не устраивает тем, что он удаляет все div с классом str.
А у меня в одной вкладке, может быть несколько divов таких.
и нужно убрать только одну строку из всех вкладок. Например:

<div class='taber visible' id='one'>
<div class='str' style='position: relative;'>
Первая вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Первая вкладка - вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='two'>
<div class='str' style='position: relative;'>
Вторая вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Вторая вкладка- вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='three'>
<div class='str' style='position: relative;'>
Третья вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Третья вкладка- вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>

Вот и мне например нужно удалить вторую строку из всех 3 вкладок.
Видимо не правильно поставил вопрос изначально...

рони

12.01.2015, 14:05

Officeoff.ru,
$(".str:odd").remove()

Officeoff.ru

12.01.2015, 16:57

Officeoff.ru,
$(".str:odd").remove()

Не логично. 3 вкладки, значит в строке есть как четные так и нечетные элементы...

рони

12.01.2015, 16:59

Вот и мне например нужно удалить вторую строку из всех 3 вкладок.
:-?
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".str:odd").remove()
});
</script>
</head>

<body>
<div class='taber visible' id='one'>
<div class='str' style='position: relative;'>
Первая вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Первая вкладка - вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='two'>
<div class='str' style='position: relative;'>
Вторая вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Вторая вкладка- вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='three'>
<div class='str' style='position: relative;'>
Третья вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Третья вкладка- вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>

</body>

</html>

рони

12.01.2015, 17:03

Officeoff.ru,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".str:eq(1)", ".taber").remove()
});
</script>
</head>

<body>
<div class='taber visible' id='one'>
<div class='str' style='position: relative;'>
Первая вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Первая вкладка - вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='two'>
<div class='str' style='position: relative;'>
Вторая вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Вторая вкладка- вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>
<div class='taber' id='three'>
<div class='str' style='position: relative;'>
Третья вкладка - Первая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
<div class='str' style='position: relative;'>
Третья вкладка- вторая строка
<div class='dop_str'>
<div class='del_base'></div>
</div>
</div>
</div>

</body>

</html>

Officeoff.ru

13.01.2015, 17:48

Странно. У меня почему-то первый вариант сначала не сработал.. Наверное руки кривые ))) Спасибо.
А если мне нужно удалить конкретную строку из 3 вкладок по клику, то это как будет? Не могу сообразить?

$('#inner_base').on('click', '.str', function() {
$(this).hide(); // Так удаляю нужную строку только из одной вкладки
$(".str:eq(1)", ".taber").remove(); // Так со всех вкладок, но только вторую в списке
});

рони

13.01.2015, 17:51

Officeoff.ru,
узнайте индекс того что удаляите и запишите в eq
$('#inner_base').on('click', '.str', function() {
var i = $('.str',this.parentNode).index(this);
$(".str:eq("+i+")", ".taber").remove();
});

Officeoff.ru

14.01.2015, 11:23

рони, огромное спасибо.
не особо понял this.parentNode, но вечером обязательно посижу почитаю про него.

рони

14.01.2015, 11:40

не особо понял this.parentNode
находим родителя(parentNode) кликнутой строки -- в этом родителе все строки с классом str -- идём по порядку по этим строкам -- встретилась кликнутая сохранили её номер (index)

Officeoff.ru

14.01.2015, 14:57

Ага, вроде понял. Но потом столкнулся с проблемой, что клик у меня должен идти по классу dop_str. Ведь в str находятся input.
Ну и почему то при замене класса работать не стало...
То есть сначала я написал:

$('#inner_base').on('click', '.dop_str', function() {
var i = $('.str',this.parentNode).index(this);
$(".str:eq("+i+")", ".taber").remove();
});

И не работало... То есть индекс определялся не верно. Переписал вот так:

$('#inner_base').on('click', '.dop_str', function() {
var i = $('.dop_str',this.closest).index(this);
$(".str:eq("+i+")", ".taber").hide();
});

Возможно, надо было использовать parent()... Но остановился на closest.

рони

14.01.2015, 15:23

this.closest
и это у вас работает?

Officeoff.ru

14.01.2015, 23:18

Рони, мне тоже показалось это бредовым сначала... Но как выяснилось это работает ))))

рони

14.01.2015, 23:35

Но как выяснилось это работает )))) может подскажите где можно прочитать про это волшебное свойство

рони

14.01.2015, 23:38

Officeoff.ru,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>

<body>
<input name="" type="button" value="test" onclick="alert(this.closest)">
<input name="" type="button" value="test" onclick="alert(this.closest)">
</body>

</html>

Officeoff.ru

15.01.2015, 11:36

Ну мы же знаем про свойство closest();
http://jquery.page2page.ru/index.php5/%D0%91%D0%BB%D0%B8%D0%B6%D0%B0%D0%B9%D1%88%D0%B8%D 0%B9_%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4%D1%8F%D1 %89%D0%B8%D0%B9_%D0%BF%D1%80%D0%B5%D0%B4%D0%BE%D0% BA
Тут описано...
И логично было написать closest(this) а не this.closest
Но как это смешно не звучит, это работает... Могу вам даже скинуть доступ, увидите что это реально работает )))

рони

15.01.2015, 12:51

Officeoff.ru,
сделайте макет всего несколько строк чтоб мир ахнул :)

Officeoff.ru

15.01.2015, 13:20

Ну немного неправильно сверстал, поэтому не совсем то что нужно убирает. Но суть ясна )))

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#inner_base').on('click', '.del_base', function() {
var i = $('.del_base',this.closest).index(this);
$(".str:eq("+i+")", ".taber").hide();
});
});
</script>
</head>
<body>
<div id='inner_base'>
<div class='taber' style='border: 1px solid red;'>
<div class='str'>
Строка 1 - Вкладка 1
<div class='dop_str'>
<div class='del_base'>del</div>
</div>
</div>
<div class='str'>
Строка 1 - Вкладка 2
</div>
</div>
<br>
<div class='taber' style='border: 1px solid red;'>
<div class='str'>
Строка 2 - Вкладка 1
<div class='dop_str'>
<div class='del_base'>del</div>
</div>
</div>
<div class='str'>
Строка 2 - Вкладка 2
</div>
</div>
</div>
</body>
</html>

А вы не подскажите как вы вставляете код, что его сразу на сайте в браузере можно выполнить?

рони

15.01.2015, 13:37

Officeoff.ru,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

... ваш код...

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Officeoff.ru

15.01.2015, 14:04

Прикольно. Спасибо.

рони

15.01.2015, 14:21

Officeoff.ru,
попробуйте разобраться сами что ваш код НЕРАБОЧИЙ :cray:

рони

15.01.2015, 14:33

Officeoff.ru, жмите по второй вкладке и смотрите результат у себя и тут (нет this.closest - это вас jquery вас спасает, она офигевает от undefined, но пытается выдать результат)
рабочий код ... :write:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#inner_base').on('click', '.del_base', function() {
var i = $(".str",$(this).closest(".taber")).index($(this).closest(".str"));
$(".str:eq("+i+")", ".taber").hide();
});
});
</script>
</head>
<body>
<div id='inner_base'>
<div class='taber' style='border: 1px solid red;'>
<div class='str'>
Строка 1 - Вкладка 1
<div class='dop_str'>
<div class='del_base'>del</div>
</div>
</div>
<div class='str'>
Строка 2 - Вкладка 1
<div class='dop_str'>
<div class='del_base'>del</div>
</div>
</div>
<div class='str'>
Строка 3 - Вкладка 1
</div>
</div>
<br>
<div class='taber' style='border: 1px solid red;'>
<div class='str'>
Строка 1 - Вкладка 2
<div class='dop_str'>
<div class='del_base'>del</div>
</div>
</div>
<div class='str'>
Строка 2 - Вкладка 2
<div class='dop_str'>
<div class='del_base'>del</div>
</div>
</div>
<div class='str'>
Строка 3 - Вкладка 2
</div>
</div>
</div>
</body>
</html>

Officeoff.ru

15.01.2015, 16:36

Добрый, jquery ))))
Да, видимо действительно так )))
Но у меня реально работает )))

Officeoff.ru

15.01.2015, 16:38

Я в личку отправил доступ, посмотрите )))
А ваш код проверил, да он работает. Видимо jquery, как html на некоторые вещи забивает и выручает, чтобы работало

рони

15.01.2015, 17:21

Officeoff.ru,
вы понять попробуйте -- у вас удаление работает только на 1 вкладке -- для этого даже this.closest ненужен -- вы что хотите напишите -- лишьбы этого значения небыло -- ваш код несработает для клика по любой другой вкладке кроме 1

рони

15.01.2015, 17:28

Officeoff.ru, на пальцах
2 вкладки 4 строки -- жмём на каждую строку смотрим i
ваш код
0 1 2 3 4 5 6 7
мой код
0 1 2 3 0 1 2 3

Officeoff.ru

16.01.2015, 11:02

Так я вот и пытаюсь понять.
Такой момент, я хотел при нажатии на del_base, который есть только в первой вкладке, удаляется строка из 3-х вкладок.

Ваш вариант, написанный выше, естественно лучше. Я с этим не спорю. Просто не понимаю, почему this.closest, все равно удалял строку из 3-х вкладок.
Я вечером, обязательно посижу, изучу эту тему, чтобы потом не задавать подобные тупые вопросы. Спасибо вам за помощь.

рони

16.01.2015, 11:37

Officeoff.ru,
ваша строка $('.del_base',this.closest) равносильна $('.del_base',абракадабра). или просто $('.del_base') находит все строки с данным классом на странице а не только в данном блоке -- теперь внимание -- естественно номера строк первого блока и начало всех строк совпадают
0 1 2 3 4 5 6 7
0 1 2 3 0 1 2 3
кликая по первому блоку -- даже с таким кодом мы достигаем нужного эфекта
но если кликнуть по второму блоку например по 1 строке
0 1 2 3 4 5 6 7
ваш код выдаст 4 ---и в 1 блоке удалять нечего нет там строки с таким индексом - ферштейн?