Javascript-форум - remove() jquery

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - remove() jquery (https://javascript.ru/forum/dom-window/52880-remove-jquery.html)

Officeoff.ru

11.01.2015 15:35

remove() jquery

Всем доброго времени суток. Возник вопрос.
Есть 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

Цитата:

Сообщение от рони (Сообщение 351009)

Officeoff.ru,

$(".str:odd").remove()

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

рони	12.01.2015 16:59

Цитата:

Сообщение от Officeoff.ru

Вот и мне например нужно удалить вторую строку из всех 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

Цитата:

Сообщение от Officeoff.ru

не особо понял 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

Цитата:

Сообщение от Officeoff.ru

this.closest

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

Officeoff.ru

14.01.2015 23:18

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

рони	14.01.2015 23:35

Цитата:

Сообщение от Officeoff.ru

Но как выяснилось это работает ))))

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

рони	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.php...%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 и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый 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 блоке удалять нечего нет там строки с таким индексом - ферштейн?

Часовой пояс GMT +3, время: 07:54.