# RJS removing content of div, but not div itself

**URL:** <https://www.ruby-forum.com/t/rjs-removing-content-of-div-but-not-div-itself/57212>\
**Category:** Rails\
**Created:** [April 7, 2006, 11:32pm UTC](https://www.ruby-forum.com/t/rjs-removing-content-of-div-but-not-div-itself/57212 "2006-04-07T23:32:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wpwood](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wpwood](https://www.ruby-forum.com/u/wpwood)\
**Post date:** [April 7, 2006, 11:32pm UTC](https://www.ruby-forum.com/t/rjs-removing-content-of-div-but-not-div-itself/57212/1 "2006-04-07T23:32:24Z")

</div>

Hi,

I’m creating a list of ingredients on a page. When the user clicks the  
‘Add Ingredient’ button a record gets added to the db and the ingredient  
gets added to the page. On the page, each record is represented by a

 with three s inside. One of the s has a link\_to\_remote to 'delete' the ingredient. When the link gets used, the record gets deleted from the db and all three s get removed from the 
. But the 
 doesn't get removed. I've been at it all day and can't figure it out. Thanks in advance to anyone who can give me some help understanding this. I've included some code below.

Best regards,  
Bill

--------------------- controller ----------------------  
class ListdemoController \< ApplicationController

def index  
session[:toggle\_color] = 1 # used to create a ‘green-bar paper’  
effect  
end

def add\_item  
@ingredient = Ingredient.new  
@ingredient.name = params[:name]  
@ingredient.qty = params[:qty]  
@ingredient.save  
render(:partial =\> ‘line\_form’)  
end

def delete  
Ingredient.find(params[:id]).destroy  
render(:partial =\> ‘remove\_line\_form’ )  
end

end

-------------------- index.rhtml ------------------------------

 Ingredient list \<%= javascript\_include\_tag "prototype" %\> \<%= stylesheet\_link\_tag "listdemo", :media =\> "all" %\> 
### Ingredient list

Enter the name and amount for each ingredient

 \<%= render(:partial =\> 'entry\_form') %\> 

```
<div id='my_list'>
</div>

```

 ------------------ \_entry\_form.rhtml ------------------- \<%= form\_remote\_tag(:update =\> 'my\_list', :url =\> {:action =\> :add\_item}, :position =\> 'bottom') %\> Name: \<%= text\_field\_tag :name %\> Amount: \<%= text\_field\_tag :qty %\> \<%= submit\_tag 'Add Ingredient' %\> \<%= end\_form\_tag %\>

----------------- \_line\_form.rhtml ----------------------

 class = Listline\<%= session[:toggle\_color] = 1 - session[:toggle\_color].to\_i %\> \> \<%= params[:name] %\> \<%= params[:qty] %\> \<%= link\_to\_remote("Delete", :update =\> "item#{@ingredient.id}", :url =\> {:action =\> 'delete', :id =\> @ingredient.id}) %\> 

--------------------- \_remove\_linie\_form.rjs ------------------------  
\<%= page.remove("#item{params[:id]}") %\>

---

<div class="post-metadata">

**Author:** ![wpwood](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wpwood](https://www.ruby-forum.com/u/wpwood)\
**Post date:** [April 7, 2006, 11:53pm UTC](https://www.ruby-forum.com/t/rjs-removing-content-of-div-but-not-div-itself/57212/2 "2006-04-07T23:53:48Z")

</div>

Bill,  
Have you tried replace (which replaces outer HTML)?

[http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html#M000433](http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html#M000433)

Bill W. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: Hi,

I’m creating a list of ingredients on a page. When the user clicks  
the ‘Add Ingredient’ button a record gets added to the db and the  
ingredient gets added to the page. On the page, each record is  
represented by a

 with three s inside. One of the s  
has a link\_to\_remote to ‘delete’ the ingredient. When the link gets  
used, the record gets deleted from the db and all three s get  
removed from the 
. But the 
 doesn’t get removed. I’ve been  
at it all day and can’t figure it out. Thanks in advance to anyone who  
can give me some help understanding this. I’ve included some code  
below.

Best regards,  
Bill

--------------------- controller ----------------------  
class ListdemoController \< ApplicationController

def index  
session[:toggle\_color] = 1 # used to create a ‘green-bar paper’  
effect  
end

def add\_item  
@ingredient = Ingredient.new  
@ingredient.name = params[:name]  
@ingredient.qty = params[:qty]  
@ingredient.save  
render(:partial =\> ‘line\_form’)  
end

def delete  
Ingredient.find(params[:id]).destroy  
render(:partial =\> ‘remove\_line\_form’ )  
end

end

-------------------- index.rhtml ------------------------------

 Ingredient list \<%= javascript\_include\_tag "prototype" %\> \<%= stylesheet\_link\_tag "listdemo", :media =\> "all" %\> 
### Ingredient list

Enter the name and amount for each ingredient

 \<%= render(:partial =\> 'entry\_form') %\> 

```
<div id='my_list'>
</div>

```

------------------ \_entry\_form.rhtml -------------------  
\<%= form\_remote\_tag(:update =\> ‘my\_list’,  
:url =\> {:action =\> :add\_item},  
:position =\> ‘bottom’) %\>  
Name:  
\<%= text\_field\_tag :name %\>  
Amount:  
\<%= text\_field\_tag :qty %\>  
\<%= submit\_tag ‘Add Ingredient’ %\>  
\<%= end\_form\_tag %\>

----------------- \_line\_form.rhtml ----------------------

 class = Listline\<%= session[:toggle\_color] = 1 - session[:toggle\_color].to\_i %\> \> \<%= params[:name] %\> \<%= params[:qty] %\> \<%= link\_to\_remote("Delete", :update =\> "item#{@ingredient.id}", :url =\> {:action =\> 'delete', :id =\> @ingredient.id}) %\> 

## --------------------- \_remove\_linie\_form.rjs

\<%= page.remove(“#item{params[:id]}”) %\>

---

<div class="post-metadata">

**Author:** ![wpwood](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wpwood](https://www.ruby-forum.com/u/wpwood)\
**Post date:** [April 8, 2006, 2:31am UTC](https://www.ruby-forum.com/t/rjs-removing-content-of-div-but-not-div-itself/57212/3 "2006-04-08T02:31:30Z")

</div>

Bill,

You need to remove the :update option from your link\_to\_remote. Your  
RJS template generates script to be eval’ed by the browser which  
removes the DIV–you don’t need to :update anything.

That being said, you don’t need to use RJS here.

Just :update the div you want to remove, and render :nothing =\> true  
in the controller. Save the RJS for when you want to delete multiple  
things in bulk.

Cheers,

Ed

> **[Edward Frederick](https://www.edwardfrederick.com)**
>
> The New Oxford Tech Blog

---

<div class="post-metadata">

**Author:** ![wpwood](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wpwood](https://www.ruby-forum.com/u/wpwood)\
**Post date:** [April 8, 2006, 6:24pm UTC](https://www.ruby-forum.com/t/rjs-removing-content-of-div-but-not-div-itself/57212/4 "2006-04-08T18:24:27Z")

</div>

Hi Edward,

Thanks very much for your response. It was close, and it put me on a  
productive track. I’m responding with my original post, including code,  
still in place below in hopes it will help folks searching the archives  
in  
the future. I’ve included the various cases of the changes I tried this  
morning with the results of each just below.

Thanks again for your help,  
Bill

----------- changes to the code below and results --------------  
NOTE: In my original posting the \_remove\_line\_form.rjs file had a  
syntax  
error. I had \<%= page.remove(“#item{params[:id]}”) %\>. It’s corrected  
below to \<%= page.remove(“item#{params[:id]}”) %\>

Change #1  
a) in link\_to\_remote in \_line\_form.rhtml, :update =\>  
“item#{@ingredient.id}”  
b) in the ‘delete’ action in the controller, render(:nothing =\>  
‘true’)  
Results  
IE6) content of the DIV is deleted but DIV remains; visually, the  
words  
are gone but the DIV is still visible  
FF1.5) content of the DIV is deleted but DIV remains; visually, the  
words are gone and the DIV is not visible

Change #2  
a) in link\_to\_remote in \_line\_form.rhtml, _remove_ the :update  
b) in the ‘delete’ action in the controller, render(:nothing =\>  
‘true’)  
Results  
IE6) DIV remains and is visible  
FF1.5) DIV remains and is visible

Change #3 (This is the one that works as required)  
a) in link\_to\_remote in \_line\_form.rhtml, _remove_ the :update =\>  
“item#{@ingredient.id}”  
b) in the ‘delete’ action in the controller, render(:partial =\>  
‘remove\_line\_form’)  
Results  
IE6) DIV is removed and is not visible  
FF1.5) NOTE: I believe the results I got here are either a bug in  
Firebug, or in RJS  
The DIV is not visible BUT as viewed in  
Firebug-\>Inspector-\>Source, the DIV remains,  
HOWEVER… it’s position in the listing is changed AND  
the  
DIVs that originally followed  
it are repeated. So if the original list was:

  

  

  

```
           the listing displayed after deleting item2 is:
            <div class="Listline0" id="item1">
            <div class="Listline0" id="item3">
            <div class="Listline0" id="item4">
            <div class="Listline0" id="item2">
            <div class="Listline0" id="item3">
            <div class="Listline0" id="item4">

```

This listing looks like a bug in Firebug.  
OTOH, inspecting the s that contain the links, each contains the  
following:  
 Delete  
That looks, to someone like me who knows nothing at all about RJS, like  
a  
bug in RJS and perhaps that is what’s causing the problem in Firebug.  
It’s  
way beyond me to know, but I thought it was worth documenting.

----------- Original message.  
Edward F. wrote:

You need to remove the :update option from your link\_to\_remote. Your  
RJS template generates script to be eval’ed by the browser which  
removes the DIV–you don’t need to :update anything.

That being said, you don’t need to use RJS here.

Just :update the div you want to remove, and render :nothing =\> true  
in the controller. Save the RJS for when you want to delete multiple  
things in bulk.

Cheers,

Ed

> **[Edward Frederick](https://www.edwardfrederick.com/)**
>
> The New Oxford Tech Blog

On 4/7/06, Bill W. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> Hi,
> 
> I’m creating a list of ingredients on a page. When the user clicks the  
> ‘Add  
> Ingredient’ button a record gets added to the db and the ingredient gets  
> added to the page. On the page, each record is represented by a
> 
>   
> with  
> three s inside. One of the s has a link\_to\_remote to ‘delete’  
> the ingredient. When the link gets used, the record gets deleted from the  
> db and all three s get removed from the 
> . But the 
>   
> doesn’t
> 
> def index  
> session[:toggle\_color] = 1 # used to create a ‘green-bar paper’  
> effect