Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2014, 14:51
Интересующийся
Отправить личное сообщение для fi.adm Посмотреть профиль Найти все сообщения от fi.adm
 
Регистрация: 26.08.2013
Сообщений: 10

Удаление содержимого контейнера
Есть вот такой js код:
$(document).ready(function (){
	
	$('.element').click(function (){
		$('.text_element',this).remove();
		$('.delete',this).remove();
	});
});

и вот такие контейнеры html:
<div class='element'>
	<div class='text_element'>text_element 1</div>
	<div class='delete'> X</div>
</div>
<div class='element'>
	<div class='text_element'>text_element 2</div>
	<div class='delete'> X</div>
</div>


Код выполняет простую задачу: при клике на содержимое одного из контейнера 'element' блоки 'text_element' и 'delete', относящиеся именно к этому контейнеру удаляются. Все работает как надо. Не устраивает лишь одно. Как сделать так, чтобы блоки (и 'text_element', и 'delete') удалялись только при клике на 'delete' и оставались на месте при клике на 'text_element'? Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2014, 15:14
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

присвоить событие на класс delete. в обработчике надо вам найти родительский элемент и сделать нужное удаление
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2014, 15:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

fi.adm,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    $('.element').click(function (event)
  	      {
  	        if($(event.target).is(".text_element")) return;
  	        $('.text_element', this).remove();
  	        $('.delete', this).remove();
  	      }
  	    );
  	  }
  	);
  </script>
</head>

<body>
<div class='element'>
	<div class='text_element'>text_element 1</div>
	<div class='delete'> X</div>
</div>
<div class='element'>
	<div class='text_element'>text_element 2</div>
	<div class='delete'> X</div>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2014, 16:54
Интересующийся
Отправить личное сообщение для fi.adm Посмотреть профиль Найти все сообщения от fi.adm
 
Регистрация: 26.08.2013
Сообщений: 10

Всем спасибо))
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2014, 20:29
Интересующийся
Отправить личное сообщение для JusteG Посмотреть профиль Найти все сообщения от JusteG
 
Регистрация: 19.07.2014
Сообщений: 15

Вот еще решение, если нужно.
$(".delete").click(function(){
$(this).parent().find(".text_element").remove();
$(this).remove;
});


Для большей гибкости при нефиксированном количестве вложений, используйте вместо ".parent()" функцию ".closest(".element")" она в отличии от parent перейдет не на один уровень вверх, а на любое количество пока не дойдет до указанного элемента.
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2014, 20:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

JusteG,
если структура как указано выше то можно так
$(".delete").click(function(){
$(this).prev().add(this).remove();
});
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2014, 20:42
Интересующийся
Отправить личное сообщение для JusteG Посмотреть профиль Найти все сообщения от JusteG
 
Регистрация: 19.07.2014
Сообщений: 15

рони, изящно. Спасибо. Простите меня невежду, я недавно пишу на js css (x)html, хотя программист я опытный. Есть к чему стремиться.

Последний раз редактировалось JusteG, 19.07.2014 в 20:58.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
получение ссылки на iframe из содержимого в этом iframe mister_maxim Events/DOM/Window 5 15.02.2013 22:48
удаление содержимого страницы аяксом zebulun AJAX и COMET 3 26.03.2012 00:54
Частичное изменение содержимого элемента kuhok Events/DOM/Window 28 07.09.2009 22:44
Видоизменение содержимого контейнеров werdes jQuery 4 10.10.2008 00:35