JavaScript - нажав на элемент и удалив его из родительского div?

Итак, у меня есть родительский div и дочерние div. JavaScript создает дочерние div, ID & текст внутри отличается. Поэтому я пытаюсь сделать следующее. За каждым элементом будет X, и если вы нажмете на него, он удалит элемент, возможно ли это сделать? Я пробовал что-то с JavaScript, но я не понимал, как сделать эту часть, если вы нажмете на этот элемент, а затем удалите это. Кроме того, он должен удалить один класс, который содержит одно и то же имя элемента. Я поставлю код ниже.JavaScript - нажав на элемент и удалив его из родительского div?

HTML Пример:

<div id="itemcart" style="float: left;height: 184px;width: 330px;left: 245px;"> 
    <div id="★_Butterfly_Knife__Crimson_Web_Field-Tested">★ Butterfly Knife | Crimson Web (Field-Tested)</div> 
    <div id="AWP__Asiimov_Battle-Scarred">AWP | Asiimov (Battle-Scarred)</div> 
    <div id="AK-47__Wasteland_Rebel_Field-Tested">AK-47 | Wasteland Rebel (Field-Tested)</div> 
    <div id="M4A1-S__Cyrex_Field-Tested">M4A1-S | Cyrex (Field-Tested)</div> 
    <div id="AWP__Corticera_Minimal_Wear">AWP | Corticera (Minimal Wear)</div> 
    <div id="StatTrak™_USP-S__Torque_Field-Tested">StatTrak™ USP-S | Torque (Field-Tested)</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Souvenir_Nova__Walnut_Field-Tested">Souvenir Nova | Walnut (Field-Tested)</div> 
    <div id="Galil_AR__Kami_Factory_New">Galil AR | Kami (Factory New)</div> 
    <div id="Tec-9__Red_Quartz_Field-Tested">Tec-9 | Red Quartz (Field-Tested)</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
</div>

Тех DIV, который находится под itemcart, добавляет JavaScript, нажав кнопку "пункт-карту". Имена карточек товара из названия изображения (изображение предмета). Если щелкнуть элемент-карту, он добавит класс «item-selected». Если элемент будет удален, щелкнув по нему, тогда он также должен удалить этот класс, выбранный для элемента, из нужного элемента на карточке элемента. Можно ли сделать что-то подобное?

источник

2016-04-27 Jacob Seen

Вы можете использовать '.remove()'. Обратите внимание, что есть дубликат 'id' at 'html' – guest271314

Да, тогда он должен просто использовать: последний, если он повторяется. –

Кроме того, как я мог использовать .remove(), чтобы удалить этот элемент? –

Вы можете использовать .append(), .parent(), .remove()

$("#itemcart div").each(function() { 
 
    // append `span` having text `"X"` to each `div` in `#itemcart` 
 
    $(this).append("<span> X</span>");  
 
}); 
 

 
$("#itemcart span").click(function() { 
 
    // remove clicked `span` parent element 
 
    $(this).parent().remove() 
 
});

#itemcart span { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="itemcart" style="float: left;height: 184px;width: 330px;left: 245px;"> 
 
    <div id="★_Butterfly_Knife__Crimson_Web_Field-Tested">★ Butterfly Knife | Crimson Web (Field-Tested)</div> 
 
    <div id="AWP__Asiimov_Battle-Scarred">AWP | Asiimov (Battle-Scarred)</div> 
 
    <div id="AK-47__Wasteland_Rebel_Field-Tested">AK-47 | Wasteland Rebel (Field-Tested)</div> 
 
    <div id="M4A1-S__Cyrex_Field-Tested">M4A1-S | Cyrex (Field-Tested)</div> 
 
    <div id="AWP__Corticera_Minimal_Wear">AWP | Corticera (Minimal Wear)</div> 
 
    <div id="StatTrak™_USP-S__Torque_Field-Tested">StatTrak™ USP-S | Torque (Field-Tested)</div> 
 
    <div id="Chroma_2_Case">Chroma 2 Case</div> 
 
    </div>

источник

2016-04-27 14:45:43 guest271314

Ничего себе, это было так просто: O? Есть ли возможность добавить это X за именем элемента? :) –

@JacobSeen Посмотреть обновленное сообщение – guest271314

heh, если я попробовал append, не хотел удалять для меня другой текст –

В HTML5 вы можете объявить пользовательский атрибут для тегов. Например, если вы печатаете продукты, которые вы собираетесь сделать что-то подобное:

<?php 
    foreach($products as $p) { 
     echo '<div class="single-product" data-product-id="' . $p->id. '" data-product-price="' . $p->price . '">' . $product->name . '</div>'; 
    } 
?>

После этого вы можете взаимодействовать с отдельными элементами с JQuery запросов

$(".sincle-product[data-product-id=1]").function();

источник

2016-04-27 14:43:17

Вы можете использовать этот сценарий, то вы должны добавить класс с именем 'RemoveItem' к дивам библиотеке

// Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script> 
    window.onload = function() { 
     $(".removeItem").click(function() { 
      this.remove(); 
     }); 
    } 
</script>

источник

2016-04-27 15:09:44

JavaScript - нажав на элемент и удалив его из родительского div?

ответ

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